看到网上某些特别好看的效果,就突然想看看这个canvas;
canvas是html5中的一个标签。所以兼容的是Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 这些浏览器;
1.新建一个canvas,并且用js显示一个矩形
html
<canvas id="mycanvas" width="500" height="500" style="border:1px solid red"></canvas> js
var my=document.getElementById("mycanvas");//获取到canvas的元素
var gd=my.getContext("2d");//将这个元素换成2d
gd.fillStyle="#cc0000";//填充的颜色
gd.fillRect(0,0,200,200);//矩形的位置和宽高 起始位置,结束位置,宽,高
2.矩形:
rect(0,0,100,100);//创建矩形
fillRect(0,0,100,100);//绘制被填充的矩形
strokeRect(0,0,100,100);//绘制矩形(无填充)
clearRect(0,0,100,100);//在矩形中清空
3.线条样式
lineCap=""//末端线的样式(butt默认 round圆形 square正方形)
lineJoin=""//边角的类型,两条线的交汇处
lineWidth=//线的宽度
miterLimint=//倾斜角度
closePath()创建从当前点连接到起始点的
4.颜色样式和阴影
fillStyle//颜色 渐变
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,0,170);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);
srokeStyle//笔触的颜色、渐变或模式。
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d"); var gradient=ctx.createLinearGradient(0,0,170,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red"); // Fill with gradient
ctx.strokeStyle=gradient;
ctx.lineWidth=5;
ctx.strokeRect(20,20,150,100);
shadowColor//阴影的颜色。
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.shadowBlur=20;
ctx.shadowColor="black";
ctx.fillStyle="red";
ctx.fillRect(20,20,100,80);
shadowOffsetX//设置或返回阴影与形状的水平距离。
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.shadowBlur=10;
ctx.shadowOffsetX=20;
ctx.shadowColor="black";
ctx.fillStyle="red";
ctx.fillRect(20,20,100,80);
shadowOffsetY//设置或返回阴影与形状的垂直距离
createLinearGradient()//在画布的内容上创建线性渐变
createRadialGradient()//在画布的内容上创建环形渐变
createPattern()//在在制定的方向上重复指定的元素
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("lamp");
var pat=ctx.createPattern(img,"repeat");
ctx.rect(0,0,150,100);
ctx.fillStyle=pat;
ctx.fill();
addColorStop()//渐变对象中指定停止的位置
var c=document.getElementById('myCanvas');
var ctx=c.getContext('2d'); var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop(1,"white"); ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
5.路径
fill()填充绘制的内容
stroke()绘制已定义的内容
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.strokeStyle="red";
ctx.stroke();
beginPath()起始一条路径或者重置当前路径
moveTo()把路径移动到画布中的指定点 不创建线条
lineTo()添加一个新点,然后创建从该点到画布中最后指定点的线条(该方法并不会创建线条)。
clip()在画布中剪裁任意形状
arc(x,y,r,起始角度,结束角度,顺时针还是逆时针)
arcTo(起始点的x坐标,起始点的y坐标,结束点的x坐标,结束点的y坐标,r)创建介于两个切线之间的弧/曲线。
6.转换
scale()
rotate()
translate()
transform()
7.图像绘制
drawImage(img,开始剪裁的x位置,开始剪裁的y位置,被剪裁的宽度,被剪裁的高度,在画布上放置的x位置,在画布上放置的y位置,要使用的图片的宽度,要使用的图片的高度)
<canvas id="mycanvas" width="700" height="500"></canvas>
<img src="img/img.png" id="img"/>
<script>
var my=document.getElementById("mycanvas");
console.log(my);
var canvas=my.getContext("2d"); var img=document.getElementById("img");
img.onload=function(){
canvas.drawImage(img,10,10,200,200,100,100,50,50);
};
8像素的操作
createImageData()创建新的空白的imagedata对象
getImageData()返回imagedata对象,该对象为画布上指定的矩形复制像素数据。
putImageData()图像数据(从指定的 ImageData 对象)放回画布上。