canvas知识点
canvas坐标系：
是以左上角向右向下的坐标
canvas注意点：
1.canvas画布默认大小300X150;
2. 给canvas画布设置大小，必须在canvas标签上或者js中，如果是在css中设置的canvas大小，仅仅是画布的缩放变化，画布本身大小没有改变；
3.记得调用描边stroke()和填充fill();
4.图形平移、旋转、缩放，都是针对坐标系，可以多次叠加，并不是画布；
canvas知识点：
const canvas = document.getElementById('id'); //获取canvas元素
const ctx = canvas.getContext('2d'); //搭建图形需要环境，简单来说就是绘画的画布
然后所有的canvas方法都是建立在ctx画布之上，
基本上通用方法：
ctx.strokeStyle = ''; //描边的样式，默认是黑色
ctx.lineWidth =''; //描边的宽度
ctx.stroke(); //描边，也就是将画的线显示出来
ctx.beginPath(); //如果再想画一个，需要把画笔拿起来，重新开始
ctx.closePath(); //最后一个点与第一个点连接起来，成为一个多边形，将直线变为图形
ctx.fillStyle =''; //图形填充的样式
ctx.fill(); //填充，将画的图形在画布上显示出来；注意：矩形的填充是ctx.fillRect(x,y,width,height)
ctx.clearRect(x,y,width,height); //清除画布内容
画直线：
ctx.moveTo(x,y);//起点
ctx.lineTo(x,y);//画笔停止位置,后面可以接着ctx.lineTo(x,y);
注意：绘制新的第二条及以上的直线，需要ctx.beginPath(),不然会干扰之前的路径；
画圆：
ctx.arc(cx,cy,r,0,2*Math.PI,true); //cx,cy圆心位置，r是半径，0和2*Math.PI是圆起始和结束弧度，true顺时针画
注意： 结束弧度如果不是360度，就可以画圆弧
画矩形：
ctx.strokeRect(x,y,width,height);画矩形不需要ctx.stroke()，因为方法名中就包含了stroke;
坐标系的平移旋转缩放：
作用会叠加，原点会保存之前形状的原点；
ctx.translate(x,y);//平移，是坐标原点(0,0)的移动
ctx.rotate(); //旋转
ctx.sale(x,y); //缩放
ctx.save()和ctx.restore()成对出现；
注意：ctx.save()保存当前坐标环境，ctx.restore()恢复当前坐标环境
canvas中的渐变：
线性渐变：ctx.createLinearGradient(x1,y1,x2,y2);
径向渐变：ctx.createRadialGradient(x1,y1,r1,x2,y2,r2);
canvas文字
填充文字 ctx.fillText('文字',x,y); //x,y是放入文字的坐标
描边文字 ctx.strokeText('文字',x,y);
注意：如果要修饰文字，需要放在填充和描边文字前面，不然不生效
ctx.fillStyle='';颜色
ctx.font='bold 30px sans-serif'; //字体样式，
ctx.textAlign = 'center/left/right' ;//文字相对于坐标的位置，默认是left
例：如果设置center,就是相对于文字中间；ctx.strokeText('描边文字',300,150);
ctx.textBaseline = 'top/middle/bottom';//垂直对齐方式
const width = ctx.measureText(文字变量).width; //获取文本宽度
图片的剪切：
图片必须加载完成后，才能剪切，必须放在实例化image的onload里
ctx.drawImage(img,imgStartX,imgStartY,width,height);
ctx.drawImage(img,imgStartX,imgStartY,endX,endY,x,y,width,height)
注释：(图片，图片开始坐标x，图片开始坐标y,图片结束x，图片结束y，放在画布坐标x，放在画布坐标y，缩放宽，缩放高)；
图形画刷：类似平铺
ctx.createPattern(img);
图形剪切：
重叠部分的剪切；ctx.clip();只会显示重叠部分，
ctx.save()保存当前坐标环境，ctx.restore()恢复当前坐标环境！
阴影：
canvas阴影，设置后对后面所有都会有阴影，不过可以用ctx.save()和ctx.restore()解决
ctx.shadowOffsetX='';//x轴偏移； ctx.shadowOffsetY='';//y轴偏移
ctx.shadowColor=''; 阴影颜色 ctx.shadowBlur =''; //边缘模糊距离
曲线的绘制:
1.用圆画；
2.贝塞尔曲线：ctx.quadraticCurveTo()
二次贝塞尔曲线：
http://blogs.sitepointstatic.com/examples/tech/canvas-curves/quadratic-curve.html
三次贝塞尔曲线：
http://blogs.sitepointstatic.com/examples/tech/canvas-curves/bezier-curve.html
动画：
利用定时器
然后不停的绘制，就能实现动画效果，注意会叠加，所以需要清空画布；
不停得到清除画布内容，ctx.clearRect(x,y,width,height),
离屏：
再创建一个新的canvas，把复杂切不需要重复绘制的图形放在这个画布上，
再通过ctx.drawImage()方法，将这个canvas图形剪切并放在第一个canvas上，
例：离屏canvas,从x,y,width,height位置 复制粘贴到 原来canvas的x,y大小是width,height
这样就不会一直绘制新的图形，只是复制而已，性能大大提高；
注意：离屏的canvas记得设置为隐藏
