HTML5画布绘制canvas
1HTML5<canvas>标签用于绘制图像（通过脚本，通常时js），但是canvas本身只是一个容器，必须通过js来绘制，getContext()方法可返回一个对象，这个对象提供了用于在画布上绘图的方法和属性。
除了IE8及往前版本不支持canvas元素外，其他主流的浏览器都支持该标签
使用canvas创建并会绘制图形，需要事先获取canvas标签，并且利用getContext()创建一个二维平面对象
<body>
<canvas id="mCanvas">你的浏览器不支持canvas标签</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
</script>
</body>
一、颜色样式和阴影
1.fillstyle：设置或返回用于填充绘画的颜色、渐变或模式
语法：context.fillStyle=color|gradient|pattern;（color是填充绘画的颜色值，gradient是渐变对象，有线性与径向，pattern是填充绘图的pattern对象，即利用现有元素来创建的对象）
2.strokeStyle：设置或返回用于笔触（矩形边框）的颜色、渐变或模式
strokeStyle属性与fillStyle属性类似，也是用于设定颜色，渐变或模式，但是，strokeStyle是用给笔触（矩形边框等）设置的
3.shadowColor：设置或返回用于阴影的颜色
4.shadowBlur：设置或返回阴影的模糊级别
5.shadowOffsetX：设置或返回阴影距形状的水平距离
6.shadowOffsetY：设置或返回阴影距形状的垂直距离
7.createLinearGradient()：创建线性渐变
语法：context.createLinearGradient(x0,y0,x1,y1);
其中，前两个参数是渐变的开始点的横坐标与纵坐标，后两个参数是渐变的结束点的横坐标与纵坐标
要实现从上到下的线性渐变，只要保证开始点与结束点的横坐标不变，要实现从左到右的线性渐变，保证开始与结束点的纵坐标不变
createLinearGradient()方法需要与addColorStop()方法一起使用，用来界定颜色更改的位置以及更改的颜色，并且绘制的时候，要将fillStyle属性设置为createLinearGradient()方法创建的对象，然后使用fillRect()方法绘制
8.createPattern()：在指定的方向上重复指定的元素
元素可以是图片、视频或者其他canvas元素，被重复的元素可用于绘制/填充矩形，圆形等
语法：context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");
image是要使用的图片、画布或视频元素，后面的参数不做解释了
eg：
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();//填充
*rect仅仅只是创建一个形状，并未在画布上进行绘制或是填充，要将填充或是绘制的图形显示，就需要使用fillStyle属性，fill()方法或是stroke()
9.createRadialGradient()：创建放射状/环形的渐变
语法：context.createRadialGradient(x0,y0,r0，x1,y1,r1);
前两个参数为开始圆的圆形坐标，第三个是开始圆的半径，接下来两个参数是结束圆的圆心坐标，最后一个参数时结束圆的半径。
关于这两个圆的位置关系变化引出的渐变，可以由这几个图来说明：
(1)原理图：
(2)当两个圆大小不相等情况下
圆1在圆2里边，并且圆心重合
圆1在圆2里边，但是圆心不重合
圆2在圆1里边，圆心不重合
圆1圆2相离，并且大小不相同
（2）两个圆大小相同
圆1与圆2相离，并且大小相同
圆1与圆2相交，大小相同
圆1圆2相交，圆心相同，并且大小相同
10.addColorStop()：规定渐变对象中的颜色和停止位置
如果不对gradient对象使用该方法，那么渐变将不可见，为了获得可见的渐变，需要创建至少一个色标。
语法：gradient.addColorStop(stop,color);
stop:介于0.0与1.0之间的值，表示渐变中开始与结束之间的位置，color为颜色值
二、线条样式
1.lineCap：设置或返回线条的结束端点样式
语法：context.lineCap="butt|round|square";
其中，butt为默认值，向线条的每个末端添加平直的边缘，round会向线条的每个末端添加圆形线帽，square会向线条的每个末端添加正方形线帽，round和square都会使得线条比原先的线条要更长。
eg：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();//重启一条路径，或是创建一条路径
ctx.lineCap="round";
ctx.moveTo(20,20);
ctx.lineTo(20,200);
ctx.stroke();//绘制路径
2.lineJoin：设置或返回两条线相交时，所创建的拐角类型
语法：cnotext.lineJoin="bevel|round|miter"
其中，bevel为创建斜角，round为创建圆角，miter为创建尖角，miter为默认值，并且miter会受miterLimit的限制
bevel：
round：
miter：
3.lineWidth：设置或返回当前的线条宽度
4.miterLimit：设置或返回最大斜接长度
*miterLimit不会改变斜接长度的大小，只是在斜接长度过长的情况下，将lineJoin的值改为bevel（斜角）
三、矩形
1.rect()：创建矩形
语法：context.rect(x,y,width,height);前两个参数为矩形左上角的坐标
rect()仅仅时创建，还需要使用 stroke() 或 fill()方法在画布上实际地绘制矩形
2.fillRect()：绘制“被填充”的矩形
语法：context.fillRect(x,y,width,height);
如果矩形使用了fillStyle设置填充，需要使用fillRect()来进行绘制已填充的矩形，如果没有写明，但是仍然调用该方法，那么矩形默认的填充颜色为黑色
3.strokeRect()：绘制矩形（无填充）
语法：context.strokeRect(x,y,width,height);
如果矩形使用strokeStyle为矩形边框设置了颜色或渐变等，则需要使用strokeRect()
4.clearRect()：在给定的矩形内清除指定的像素
语法：context.clearRect(x,y,width,height);
四、路径
1.fill()：填充当前绘图(路径)
语法：context.fill()
使用fillStyle()来填充一种颜色/渐变，默认填充颜色为黑色，如果路径没有关闭，fill()会从路径结束点到开始点之间添加一条线，然后关闭路径，再进行填充
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(20,20,150,100);
ctx.fillStyle="green";
ctx.fill();
2.stroke()：绘制已定义的路径
语法：context.stroke()
使用strokeStyle()来给路径填充一种颜色或渐变，默认填充颜色为黑色，stroke()方法会实质地画出moveTo()和lineTo()方法创建的路径
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="green";
ctx.stroke();
3.beginPath()：起始一条路径，或重置当前路径
4.moveTo()：把路径移动到画布中的指定点，不创建线条
语法：moveTo(x，y)
规定一条路径的开始点
5.closePath()：创建从当前点回到起始点的路径
语法：context.closePath()；
将路径封闭
6.lineTo()：添加一个新点，然后在画布中创建从该点到最后指定点的线条
绘制路径的下一个连接点，用法与moveTo类似
7.clip()：从原始画布剪切任意形状和尺寸的区域
语法：clip(x0,y0,x1,y1);
一旦剪切了某个区域，那么只有在该区域范围内绘制的内容才可见。也可以在使用 clip() 方法前通过使用 save() 方法对当前画布区域进行保存，并在以后的任意时间对其进行恢复（通过 restore() 方法）
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// 剪切矩形区域
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();
// 在 clip() 之后绘制绿色矩形
ctx.fillStyle="green";
ctx.fillRect(0,0,150,100);
不剪切
剪切
8.quadraticCurveTo()：创建二次贝塞尔曲线
语法：context.quadraticCurveTo(cpx,cpy,x,y);前两个参数是曲线的控制点坐标，后两个时=是结束点坐标
9.bezierCurveTo()：创建三次方贝塞尔曲线
用法和二次贝塞尔曲线相似，但是会多一个控制点
10.arc()：创建弧/曲线（其实就是圆或部分圆）
语法：context.arc(x,y,r,sAngle,eAngle,counterclockwise);其中前三个参数圆的中心坐标和半径，后三个参数分别是起始角与结束角以及规定顺时针还是逆时针方向，起始角和结束角均以弧度计，三点种方向为0。最后一个参数true代表逆时针，false代表顺时针，默认是逆时针如需通过 arc() 来创建圆，请把起始角设置为 0，结束角设置为 2*Math.PI
11.arcTo()创建两切线之间的弧/曲线
12.isPointPath()：如果指定点位于当前路径中，则返回true，否则返回false
五、转换
1.scale():缩放当前绘图至更大或更小
语法：context.scale(scalewidth,scaleheight);
在使用了scale方法后，之后绘制的图形都会比原先的缩放相对应的倍数
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
2.rotate()：旋转当前绘图
语法：context.rotate(angle)；
rotate方法以弧度进行计算，如需将角度转换为弧度，请使用 degrees*Math.PI/180 公式进行计算
3.translate()：重新映射画布上的(0，0)位置
ctx.translate(70,70);
ctx.fillRect(10,10,100,50);
以上代码绘制出来的图形实际位置在(80，80)处开始绘制
4.transform()：替换绘图当前的转换矩阵
语法：context.transform(a,b,c,d,e,f);
其中，这六个参数分别代表的是：水平缩放绘图，垂直倾斜绘图，水平倾斜绘图，垂直缩放绘图，垂直移动绘图，水平移动绘图
transform允许旋转，缩放，倾斜，移动当前的环境
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="yellow";
ctx.fillRect(0,0,250,100)
ctx.transform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="red";
ctx.fillRect(0,0,250,100);
ctx.transform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="blue";
ctx.fillRect(0,0,250,100);
注意：每一次调用transform()时都会从上一个变换开始构建
5.setTransform()：将当前转换重置为单位矩阵，然后运行transform
与transform()不同，它不会相对于其他变换来发生行为
六、文本
1.font
语法： context.font="font-style font-weight font-size font-family "
2.textAlign
语法同上，有五个参数值分别是start，end，left，right，center，其中start与left相同，end与right相同
3.textBaseline
支持的各参数与对应位置
4.fillText()：在画布上绘制“被填充”的文本
5.strokeText()：在画布上绘制文本(无填充)
6.measureText()：返回包含指定文本宽度的对象
七、图像绘制
drawImage()：向画布上绘制图像、画布或视频
获取文档中的图像或是视频，然后在画布指定位置将他们绘制出来
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,10,10);
*在画布上绘制图片，如果要规定图像的宽度和高度，则可以在后面添加上这两个参数
也可以先将图像剪切，在放到画布上
context.drawImage(img,sx,sy,swidth,x,y,width,height);
eg：js，每隔20毫秒，代码就会绘制视频的当前帧：
var v=document.getElementById("video1");
var c=document.getElementById("myCanvas");
ctx=c.getContext('2d');
v.addEventListener('play',function() {var i=window.setInterval(function()
{ctx.drawImage(v,0,0,270,135)},20);},false);
v.addEventListener('pause',function() {window.clearInterval(i);},false);
v.addEventListener('ended',function() {clearInterval(i);},false);
八、像素操作
1.width：返回ImageData对象宽度
2.height：返回ImageData对象高度
3.data：返回一个对象，这个对象包含ImageData对象的数据值
4.createImageData()：创建一个ImageData对象
什么是ImageData对象，这个对象包含一个像素点信息的数组data，而每一个像素点信息又是一个有着四条信息的数组，分别是RGBA四个值，在设置完之后，我们可以利用putImageData()数组信息拷贝到画布上
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var imgData=ctx.createImageData(100,100); for (var i=0;i<imgData.data.length;i+=4) { imgData.data[i+0]=255; imgData.data[i+1]=0; imgData.data[i+2]=0; imgData.data[i+3]=255; } ctx.putImageData(imgData,10,10);
5.getImageData()：返回ImageData对象，该对象为画布上指定的矩形复制像素数据
6.putImageData()：把图像数据从指定的ImageData对象返回画布上
九、合成
1.globalAlpha：设置或返回绘图的当前alpha或透明值
2.globalCompositeOperation：设置或返回新图像如何绘制到已有的图像上
