了解canvas

HTML5中 canvas 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成. 标签只是图形容器，您必须使用脚本来绘制图形。你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。

1、获取绘图上下文: getContext()

这个需要调用getContext()方法并传入上下文的名字，传入“2d”，就可以获取2D的上下文对象：

var drawing=document.getElementById("drawing");
//确定浏览器支持<canvas >元素
if(drawing.getContext){
    var ctx=drawing.getContext("2d");
}

2、导出canvas 绘制的图像: toDataURL()

这个方法接收一个参数，即图像的MIME格式，适合用于创建任何的上下文

var drawing=document.getElementById("drawing");
//确定浏览器支持<canvas >元素
if(drawing.getContext){
    var ctx=drawing.getContext("2d");
    //获取图像的数据URL
    var imgURL=drawing.toDataURL("image/png");
    //显示图像
    var image=document.creatElement("img");
    image.src=imgURL;
    document.body.appendChild(image);
}

3、填充和矩形的填充: fillStyle和fillRect

填充是用指定的样式填充图形，可以是CSS颜色，渐变，或图案；fillRect(x,y,width,height) 方法定义了矩形当前的填充方式，x为矩形x坐标，y为矩形y坐标，width和height是矩形的宽度和高度。这些参数的单位是像素。

var drawing=document.getElementById("drawing");
//确定浏览器支持<canvas >元素
if(drawing.getContext){
    var ctx=drawing.getContext("2d");
    //填充颜色黑色
    ctx.fillStyle="#000";
    //在画布上绘制 200x200 的矩形，从左上角开始 (0,0)。
    ctx.fillRect(0,0,200,200);
}

4、描边和矩形的描边: strokeStyle和strokeRect

描边是只在图形的边缘画线；strokeRect(x,y,width,height) 方法定义了矩形当前的填充方式，x为矩形x坐标，y为矩形y坐标，width和height是矩形的宽度和高度。这些参数的单位是像素。

var drawing=document.getElementById("drawing");
//确定浏览器支持<canvas >元素
if(drawing.getContext){
    var ctx=drawing.getContext("2d");
    //描边红色
    ctx.strokeStyle="#red";
    //在画布上绘制 200x200 的矩形，从左上角开始 (0,0)。
    ctx.strokeRect(0,0,200,200);
}

6、清除矩形: clearRect()

这个方法用于清除画布上的矩形区域，本质上是可以把绘制上下文中的某一个矩形区域变成透明。

7、绘制路径

1. beginPath()：起始一条路径，或重置当前路径；
2. arc(x,y,r,sAngle,eAngle,counterclockwise)：创建弧/曲线（用于创建圆形或部分圆）
3. arcTo(x1,y1,x2,y2,r)：创建两切线之间的弧/曲线；从上一点开始绘制一条弧线，到(x2,y2)为止，并且以给定的半径radius穿过(x1,y1)
4. bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)：创建三次方贝塞尔曲线；从上一点开始绘制一条曲线，到(x,y)为止，并且以(c1x,c1y)和(c2x,c2y)为控制点
5. lineTo(x,y)： 添加一个新点，然后在画布中创建从该点到最后指定点的线条；从上一点开始绘制一条直线，到(x,y)为止
6. moveTo(x,y)：把路径移动到画布中的指定点，不创建线条；将绘图游标移动到(x,y)，不画线
7. quadraticCurveTo(cx,cy,x,y)：创建二次贝塞尔曲线；从上一点开始绘制一条二次曲线，到(x,y)为止，并且以(cx,cy)为控制点
8. rect(x,y.width,height)：从点(x,y)开始绘制一个矩形，宽度和高度分别是width和height指定，这个方法绘制的是矩形的路径而不是fillRect()和strokeRect()所绘制的独立的形状
9. fill()：填充当前绘图（路径）；如果路径已完成想用fillStype来填充它，就使用fill()方法；
10. stroke()：绘制已定义的路径的描边
11. clip()：从原始画布剪切任意形状和尺寸的区域
12. closePath()：创建从当前点回到起始点的路径

8、绘制文本：fillText()和strokeText()

1. font：表示文本样式、大小及字体
2. textAlign：表示文本对其方式
3. textBaseline：表示文本的基线

ctx.font="bold 16px Arial";
ctx.textAlign="start";
ctx.textBaseline="middle";

9、变换

1. rotate(angle)：围绕原点旋转图像angle弧度
2. scale(scaleX,scaleY)：缩放图像，在x方向乘以scaleX，在y方向乘以scaleY，scaleX和scaleY默认都是1.0
3. translate(x,y)：将坐标原点移动到(x,y)。执行这个变换之后，坐标(0,0)会变成之前由(x,y)表示的点
4. setTransform(a,b,c,d,e,f)：将变换矩阵重置为默认状态，然后再调用transform()
5. transform(a,b,c,d,e,f)：直接修改变换矩阵，方式是乘以如下矩阵：
   a c e
   b d f
   0 0 1

//变换原点-从(0,0)变换成(100,100)
ctx.translate(100,100);
//旋转
ctx.rotate(1);
//缩放一倍
ctx.scale(2,2);

10、绘制图像：drawImage()

1. drawImage(img,x,y)：需要绘制的图像，源图像的x坐标和源图像的y坐标
2. drawImage(img,x,y,width,height)：需要绘制的图像，源图像的x坐标，源图像的y坐标，目标图像宽度和目标图像高度
3. drawImage(img,sx,sy,swidth,sheight,x,y,width,height)：需要绘制的图像，源图像的x坐标，源图像的y坐标，源图像宽度，源图像高度，目标图像的x坐标，目标图像的y坐标，目标图像宽度和目标图像高度

11、阴影

1. shadowColor：用css格式表示阴影的颜色，默认是黑色
2. shadowOffsetX：形状或路径x轴方向的阴影偏移量，默认为0
3. shadowOffsetY：形状或路径y轴方向的阴影偏移量，默认为0
4. shadowBlur：模糊的像素数，默认为0，即为不模糊

//设置阴影
ctx.shadowOffsetX=5;
ctx.shadowOffsetY=5;
ctx.shadowColor="red";
ctx.shadowBlur=4;

12、渐变：createLinearGradient()

1. createLinearGradient()方法创建线性的渐变对象，渐变可用于填充矩形、圆形、线条、文本等等。其中有四个参数，ctx.createLinearGradient(x0,y0,x1,y1)：x0是起点的x坐标，y0是起点的y坐标，x1是终点的x坐标，y1是终点的y坐标
2. addColorStop(stop,color)：stop介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置，color是在结束位置显示的 CSS 颜色值

//一个从黑到红再到白的渐变
var gradient=ctx.createLinearGradient(0,0,170,0);
gradient.addColorStop(0,"black");
gradient.addColorStop(0.5,"red");
gradient.addColorStop(1,"white");
//绘制矩形-渐变
ctx.fillStyle=gradient;
ctx.fillRect=(30,30,100,100);

13、模式：createPattern()

模式就是重复的图像，可以用来填充或者描边的图形，创建一个新的模式，可以调用createPattern()方法并传入两个参数：一个img元素和一个表示如何重复图像的字符串

var img=document.images[0];
var patt=ctx.createPattern(img,"repeat");
//绘制矩形-模式
ctx.fillStyle=patt;
ctx.fillRect=(30,30,100,100);