canvas html5绘制图像
一、
什么是canvas？
HTML5 canvas>元素用于图形的绘制，通过脚本(通常是JavaScript)来完成
canvas>标签只是图形容器，你必须使用脚本绘制图形,canvas本身是没有绘图能力的
默认情况下canvas元素没有边框和内容，一个画布在网页上是一个矩形框，使用canvas元素来绘制元素
可以获得CanvasRenderingContext2D对象，此对象提供了很多画图的API
二、
canvas画图的三部曲
1.得到canvasDOM对象
2.调用canvas对象的额getContext()方法得到CanvasRenderingContext2D对象
3.调用CanvasRenderingContext2D完成画图
fill()//填充
stroke()//绘制边框
style:在进行图形绘制前，要设置好绘图的样式
fillStyle//填充的样式
strokeStyle//边框样式
lineWidth//图形边框宽度
绘制矩形 fillRect(x,y,width,height) strokeRect(x,y,width,height)
清除矩形区域 clearRect(x,y,width,height)
圆弧arc(x, y, radius, starAngle,endAngle, anticlockwise)
路径 beginPath() closePath():
小结：
1、系统默认在绘制第一个路径的开始点为beginPath
2、如果画完前面的路径没有重新指定beginPath，那么画第其他路径的时候会将前面最近指定的beginPath后的全部路径重新绘制
3、每次调用fill（）的时候会自动把当次绘制的路径的开始点和结束点相连，接着填充封闭的部分
4、如果没有重新beginPath那么前面的路劲会保留，每次画路径都在前后加beginPath() 和context.closePath()就行
绘制线段 moveTo(x,y) lineTo(x,y)
线性渐变createLinearGradient(xStart,yStart,xEnd,yEnd)
线性渐变颜色addColorStop(offset,color)，offset:设定的颜色离渐变结束点的偏移量(0~1)
径向渐变（发散）createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd)，参数含义：开始发散的圆心坐标，半径，结束发散的圆心坐标，半径
径向渐变（发散）颜色addColorStop(offset,color)
图形变形:
1、平移translate(x,y)
2、缩放scale(x,y)
3、旋转rotate(angle)
拓展；
save(); //保存了当前context的状态
restore(); //恢复到刚刚保存的状态
矩阵变换 transform(m11,m12,m21,m22,dx,dy)，transfrom包括旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix
图形组合 globalCompositeOperation=type
type：
source-over（默认值）:在原有图形上绘制新图形
destination-over:在原有图形下绘制新图形
source-in:显示原有图形和新图形的交集，新图形在上，所以颜色为新图形的颜色
destination-in:显示原有图形和新图形的交集，原有图形在上，所以颜色为原有图形的颜色
source-out:只显示新图形非交集部分
destination-out:只显示原有图形非交集部分
source-atop:显示原有图形和交集部分，新图形在上，所以交集部分的颜色为新图形的颜色
destination-atop:显示新图形和交集部分，新图形在下，所以交集部分的颜色为原有图形的颜色
lighter:原有图形和新图形都显示，交集部分做颜色叠加
xor:重叠飞部分不现实
copy:只显示新图形
给图形绘制阴影
shadowOffsetX :阴影的横向位移量（默认值为0）
shadowOffsetY :阴影的纵向位移量（默认值为0）
shadowColor :阴影的颜色
shadowBlur :阴影的模糊范围（值越大越模糊）
绘制图像
绘图：drawImage
图像平铺：createPattern(image,type)
图像裁剪：clip()
像素处理：getImageData(sx,sy,sw,sh)
绘图 context.drawImage
绘制文字
填充文字：fillText(text,x,y)
绘制文字轮廓 strokeText(text,x,y)
保存和恢复状态
保存：save()
恢复：restore()
保存文件 canvas.toDataURL(MIME)
canvas绘制出来的图片只是canvas标签，是不可以进行操作的，但是利用canvas.toDataURL(MIME)这个方法就可以将绘制的图片生成成可操作的图片
结合setInterval制作动画
三、
CanvasRenderingContext2D对象，只提供了两个方法来绘制图形
fillStyle=”颜色”
fillRect(float x, float y, float width,float height)
strokeStyle=”颜色”
lineWidth=10；
lineJoin=”meter|round|bevel”
strokeRect(float x,float y,float width,float height)
代码：
function init(){
var c=document.getElementById(‘myCanvas’);
var ctx=c.getContext(‘2d’);
// ctx.fillStyle=”#ccc”;
// ctx.fillRect(0,0,50,75);//fillRect() 方法绘制“已填色”的矩形。默认的填充颜色是黑色,参数含义分别是，左上角的x,y坐标和矩形的宽高
ctx.moveTo(0,0);
ctx.lineTo(200,200);//定义开始坐标(0,0), 和结束坐标 (200,100). 然后使用 stroke() 方法来绘制线条:
ctx.stroke();
// 绘制圆形
ctx.beginPath();
ctx.arc(95,50,40,0,1*Math.PI,false); //arc()创建弧/曲线、圆,参数含义圆心坐标，半径，起始角，结束角，逆时针还是顺时针（TRUE||false），可选
ctx.stroke();
// canvas文本
ctx.font=”30px ‘微软雅黑’”;
ctx.fillText(“Hello World”,10,50,200); //fillText() 方法在画布上绘制填色的文本。文本的默认颜色是黑色,参数的含义分别是要绘制的文本，文本的x,y坐标,文本的最大宽度，可选
ctx.strokeText(“ Hello World”,10,50); //strokeText()在画布上绘制文本（无填充）\
// 创建渐变
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,”red”);
grd.addColorStop(0.5,”green”);
grd.addColorStop(1,”yellow”);
// 使用渐变填充矩形
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
// 把一幅图像放置到画布上
var img=document.getElementById(“img”);
ctx.drawImage(img,100,100);
var cc=document.getElementById('myCanva');
var cctx=cc.getContext('2d');
/*cctx.beginPath();
cctx.arc(100, 50, 100, 0, Math.PI * 2, true);
cctx.stroke();
cctx.closePath();
cctx.fillStyle = 'rgba(0,255,0,0.25)';
cctx.fill();*/
cctx.beginPath();
cctx.arc(10, 10, 50, 0, Math.PI/2 , false);
cctx.fillStyle = 'rgba(255,0,0,0.25)';
cctx.fill();
cctx.strokeStyle = 'rgba(255,0,0,0.25)'
cctx.closePath();
// cctx.stroke();
}