1.初始canvas
（1）canvas标签和audio、video一样，是h5新增的一个功能性的标签。
（2）canvas可以结合面向对象的编程思想，向网站中加入一些特效。（相当于一个画布）
（3）canvas标签中写入的HTML内容只有在游览器不支持canvas的时候才会显示，一般情况下，为了使网站建设更加完善，我们在canvas标签里，会写入一些视频、图片、当canvas标签不能正常显示的时候，canvas标签中的内容就会被代替canvas显示。
（4）可以使用canvas标签的style属性的width，height给canvas设置宽高，但是这种方式会造成canvas标签的拉伸。当我们获取一些坐标的时候获取到的是不正确的值，所以大多数情况都是使用canvas标签本身的width和height属性，直接为canvas标签设置宽高，这种设置方式 只设置数值，。不用带PX 像素单位。
（5）canvas默认宽高是300 * 150px
2.canvas基本操作
（1）canvas在 游览器中是没有dispaly属性的，我们可以根据编码需求来自主的为canvas标签设置dispaly属性。
（2）canvas画笔获取
（3）canvas画线
[1]使用canvas作画时，需要使用到坐标点，canvas画布的（0，0）点在canvas的左上角。
【画线】
ctx.beginPath()；开启一条新路径
ctx.moveTo();画线的开始坐标
ctx.lineTo();画线的下一个坐标
ctx.closePath；关闭路径，链接这条线的第一个点和最后一个点。
ctx.strokeStyle = 'red'; 设置画笔的颜色
ctx.lineWidth = 5; 设置画笔粗细
ctx.stroke();准备工作就绪，开始画线
（4）canvas画块
使用的是ctx.fillRect(x,y,width,height)；
x，y 为块左上角在canvas中的坐标。
width，height 为要绘制块的宽与高
在canvas中，绘制区域，使用到的是ctx.fill();
为绘制区域设置填充样式的是：ctx.fillStyle = 'color';
注意：该设置需要写在fillRect（）之前，否则将会不生效。
ctx.clearRect(x,y,width,height)；清除画布
（5）获取鼠标至canvas左上角的位置
（6）在canvas上绘制矩形
（7）canvas画圆
Math.PI = 180deg
1.绘制弧度：ctx.arc(ox,ox,r,startDeg,endDeg,boolean);
ox,oy 为要绘制弧度的原型角坐标。
r:为要绘制弧度的半径
startDeg:弧度开始的角度
startdeg:弧度结束的角度（是根据Math.PI计算出来的）
boolean:可选，false为顺时针，true为逆时针，决定弧度的旋转方向，默认值为false
【2】在画板上绘制圆
//计算半径
var r =Math.sqrt(Math.pow(endX - startX,2)+ Math.pow((endY-startY),2))/2;
（8）线性渐变
ctx.createLinearGradient(x1,y2,x2,y2);
x1，y2：线性渐变的开始点。
x2，y2：线性渐变的结束点
g.addCOlorStop('0.2',red);
在g这个渐变里，red从0.2（20%）的位置开始向两边渲染。
（9）径向渐变
ctx.createRadialGradIent(x1,y1,r1,x2,y2,r2);
x1，y1（起始圆的圆心位置）
r1：起始圆的半径
x2，y2：结束圆的圆心位置
r2：结束圆的半径
起始圆和结束圆分了此次径向渐变的区域，addColorStop添加的颜色，是添加在这个区域里的。
要使用径向渐变填充的区域，要填充的区域和径向渐变的区域位置必须保持关联，否则，使用不到径向渐变
（10）将canvas的左上角移动至画布的正中心
ctx.translate(x,y);
（11）圆形碰撞
【1】获取鼠标距离，判断检测，判断圆心距
（12）canvas图像处理
globalCompositeOperation 是canvas用户来操作图像叠加的属性
【】ctx.globalCompositeOperation = 'source-in';//canvas 用来操作图像叠加的属性 (新图与原图叠加的部分)
【】ctx.globalCompositeOperation = 'source-out';//canvas 用来操作图像叠加的属性 （新图没有和原图叠加的部分）
【】ctx.globalCompositeOperation = 'destination-in';//canvas 用来操作图像叠加的属性 (原图与新图叠加的部分)
【】ctx.globalCompositeOperation = 'destination-out';//canvas 用来操作图像叠加的属性 (原图未与新图重叠的部分)
【】ctx.globalCompositeOperation = 'lighter';//canvas 用来操作图像叠加的属性 (将两个图中重合的颜色做一个叠加处理)
【】ctx.globalCompositeOperation = 'copy';//canvas 用来操作图像叠加的属性 (新图将覆盖原图)
（13）canvas 图片处理
1.在canvas上异步加载会导致图片不能绘制，所以我们要将绘制过程放在图片本身的onload事件里。
ctx.drawImage(imgObj,x,y);
x，y 在canvas上绘制图片的坐标（canvas上图片的左上角）
ctx.drawImage(imgObj,x,y,width,height);
x，y 在canvas上绘制图片的坐标（canvas上图片的左上角）
width，height 图片在canvas上的宽高
ctx.drawImage(imgObj,原图开始裁剪位置x坐标，原图开始裁剪位置y坐标，原图裁剪的宽度，原图裁剪的高度，canvas上开始绘制位置的x坐标，canvas上开始绘制图片y坐标，canvas上图片宽度，canvas上图片高度)；
注意：canvas 绘制图片不会按照经过css样式修饰后的图片信息绘制，会按照图片原本的信息绘制。
//贝塞尔曲线
ctx.movTO (开始点)
ctx.bezierCurveTo(80,300,300,80,0,0);
80为第一个点x
300位第一个点Y
300为第二个点x
80位第二个点x
0.0 为结束点。
