getContext('2d') : canvas的2D绘图环境
【直线与方块】
1/fillRect(x,y,w,h) : 绘制背景方块，默认黑色
2/strokeRect(x,y,w,h) : 绘制边框方块，默认2像素，分别在l,t多加0.5边框就变成1像素了
3/fillStyle : 设置填充背景色
4/strokeStyle : 设置边框颜色
5/lineWidth : 设置边框粗细
6/lineJoin : 边界连接点样式( round为圆角，bevel为斜角 )
【路径】
1/beginPath() : 开始绘制
2/closePath() : 结束绘制，闭合路径
3/moveTo(x,y) : 移动坐标
4/lineTo(x,y) : 定义坐标点的位置
5/stroke() : 用线条连接坐标点
6/fill() : 用背景填充坐标点
7/rect(x,y,w,h) : 方块坐标连接，相当于lineTo方法的集合
8/clearRect(x,y,w,h) : 清除痕迹
9/save()和restore() : 保存和恢复路径，两者配合使用，分别放在开头和结尾位置，避免同一画布里方法公用，相当于js中的变量作用域
10/lineCap : 线条的端点样式( round为圆角，square直角，但它的高度多出为宽的一半 )
【曲线】
1/arc(x,y,r,startR,endR,false) : 绘制圆弧的方法，参数(x坐标，y坐标，半径，开始弧度，结束弧度，顺时针或逆时针，false为顺,true为逆,弧度=角度*Math.PI/180;)
2/arcTo(x1,y1,x2,y2,r) : 2组坐标加半径
3/quadraticCurveTo(dx1,dx2,x1,y1) : 1个控制点加1个坐标点，贝塞尔曲线1
4/bezierCurveTo(dx1,dy1,dx2,dy2,x1,y1) : 2个控制点加1个坐标点,贝塞尔曲线2
【变换】
1/translate(x,y) : 偏移原点坐标
2/rotate(弧度) : 角度*Math.PI/180
3/scale(x,y) : 为1为临界点，大于则放大，小于则缩小，x和y相同为等比缩放
【图片与背景】
1/drawImage(obj,x,y) ：图片加载完后调用的方法
2/createPattern(obj,repeat) : 画布背景
3/createLinearGradient(x1,y1,x2,y2……) : 线性渐变背景
4/createRadialGradient(x1,y1,r1,x2,y2,r2……) : 放射性(径向)渐变背景
5/addColorStop(0~1,color) : 渐变点，2个或以上组成
【文本】
1/fillText(txt,x,y) : 文本颜色
2/textBaseline : 对齐方式,top,middle,bottom，默认是baseline
3/strokeText(txt,x,y) : 文本描边
4/measureText(txt).width : 文本居中方法
5/shadowOffsetX : 阴影的水平方向偏移
6/shadowOffsetY : 阴影的垂直方向偏移
7/shadowColor : 阴影颜色
8/shadowBlur : 阴影模糊半径( 高斯模糊 )
【像素点】
更新中……
【合成】
更新中……
