canvas绘图

canvas技术专用于2D绘图位图坐标系三角函数
canvas相当于画布，getContext相当于画画的纸

绘制路径
路径本身不可见，必须用描边stroke( ) 填充fill( ) 裁剪等 绘制出来
ctx.beginPath(); 开始路径
ctx.moveTo(x,y) 线条开始坐标
ctx.lineTo(x,y) 线条结束坐标
ctx.closePath(); 结束路径
ctx.fill( ) 填充路径
ctx.lineCap = ‘square’; 线端样式 默认是butt square round可以选
ctx.lineJoin = ‘miter’; 路径交汇处 bevel 斜面 round 圆角 miter尖角
ctx.stroke( ) 描边路径

绘制圆形
ctx.arc(x, y, r, startAngle,endAngle, isClockwist);

渐变
x1,y1 x2,y2分别是渐变开始位置和结束位置，可以达到控制渐变方向的效果
var g = ctx.createLinearGradient(x,y,x1,y1) - 创建线条渐变

绘制圆角矩形
ctx.arcTo(B(x, y),C(x, y), 圆角弧度大小 );
起点 需要抠出弧度的大小

绘制图像
drawImage(image,x,y)
ctx.createPattern(image,“repeat|repeat-x|repeat-y|no-repeat”);（img,默认水平和垂直方向重复，水平方向重复，垂直方向重复，显示一次不重复）
ctx.save(); 保存当前画布
ctx.translate(x,y); 调整整个画布的原点 平移
ctx.restore();恢复之前的画布