canvas一些属性
lineTo(x,y) 定义线条结束坐标
moveTo(x,y) 定义线条开始坐标
ctx.stroke();绘制空心图形
ctx.fill();填充图形 把当前路径环绕起来的区域进行填充
ctx.fillStyle 填充颜色
ctx.strokeStyle 绘制图形颜色
ctx.closePath();//让图形闭合，防止锯齿
ctx.beginPath();// // 一个画布内画多个图形，放了防止重绘之前的路径，所以先把之前的路径清除掉
非零环绕原则：
a 是用来判断哪些区域属于路径内( 计算结果非0，即为路径内 )。
b 在路径包围的区域中，随便找一点，向外发射一条射线，
c 和所有围绕它的边相交，
d 然后开启一个计数器，从0计数，
e 如果这个射线遇到顺时针围绕，那么+1，
f 如果遇到逆时针围绕，那么-1，
g 如果最终值非0，则这块区域在路径内。
备注：基数边的区域一定在路径内。
先填充与先描边
描边的时候会占用原图形的一部分(线宽的一半)
为了让线宽符合要求，最好先填充再描边，防止填充时覆盖掉线宽的一半
ctx.fill(); ctx.stroke();
canvas在绘制线条的时候，会向左或向右偏移线宽的一半，然后进行绘制
如果线宽为奇数，边缘颜色会变浅
设置线帽样式:
ctx.lineCap='butt'、'round'、'square'
butt是默认值
round线头是圆的
square线头两段各增加线宽的一半
设置交点样式
ctx.lineJoin = ‘miter' 、'round'、'bevel'
miter是默认值，两边向外延伸相交为尖尖角，
round是圆头，
bevel两边相连为一个斜面。
内置矩形的API
ctx.rect(起点x，起点y，宽，高)
绘制一个描边矩形
ctx.strokeRect(起点x，起点y，宽，高);
绘制一个填充矩形
ctx.fillRect(起点x，起点y，宽，高);
按照矩形的大小清除画布中指定位置的内容
ctx.clearRect(起点x，起点y，宽，高);
绘制虚线
ctx.setLineDash([5,3]);设置画线的时候空白部分和实现部分的大小 5像素实线，3像素空白
画弧( 画的是路径 )
ctx.arc( 圆心x轴坐标，圆心y轴坐标，半径, 起点弧度，结束点弧度，是否逆时针画(可选) )
设置文字的属性
ctx.font = 和css语法一样。
注意：这里设置字体大小时必须带单位，单位支持css的所有表示方式。
注意：单独设置字体大小不会生效，必须要加一个额外属性样式。
ctx.font = '2rem 微软雅黑';
绘制描边文字：
ctx.strokeText( 文字, 参考x轴坐标，参考y轴坐标，限制文字的最大长度(可选) )
ctx.strokeText( '嘻嘻嘻嘻嘻嘻', 100, 100 );
绘制填充文字：
ctx.fillText( 文字, 参考x轴坐标，参考y轴坐标，限制文字的最大长度(可选) )
ctx.fillText( '咯咯咯咯咯咯', 100, 200 );
设置文字的水平对其方式：
ctx.textAlign = 'left || start' 、 'right || end' 、 'center'
默认值为start。
设置文字的垂直对其方式：
ctx.textBaseline = 'top' 、'bottom'、'middle'、'alphabetic'、'hanging'、'ideographic'
默认值为alphabetic。
状态保存：
ctx.save();
把当前的状态(绘制环境的所有属性)copy一份进行保存。
状态回滚：
ctx.restore();
把最近保存的一次状态作为当前状态。
ctx.drawImage()
绘制图像，有三种使用方式。
第一种，三参数版本：
把图像绘制到指定的坐标。
必须要在img图像下载完毕之后使用
img.onload = function() {
ctx.drawImage( img, 10, 10 );
}
第二种，五参数版本：
把图像绘制到指定的坐标，并指定其大小。
必须要在img图像下载完毕之后使用
img.onload = function() {
ctx.drawImage( img, 10, 10, 200, 200 );
}
第三种，九参数版本：
把裁剪到的部分图像绘制到指定的坐标，并指定其大小。
必须要在img图像下载完毕之后使用
img.onload = function() {
ctx.drawImage( img,
0, 0, 400, 400,
100, 100, 400, 400 );
}
ctx.isPointInPath()判断点是否在路径内（路径必须绘制出来才可以
比如this.ctx.rect()；然后必须this.ctx.stroke()才可以
）
requestAnimationFrame
请求动画帧函数，这个函数和setTimeout方法使用类似，
他都是定时器，却别在于setTimeout可以自由指定回调的触发时间，
而requestAnimationFrame函数回调的触发是由浏览器来控制的。
requestAnimationFrame( callback )
备注：当浏览器重绘页面的时候，就会调用这个callback，
这样callbackg的执行就会比较稳定，适合用来做流畅的动画。
用法:
(function con() {
console.log(111);
requestAnimationFrame( con );
}());
