canvas 是一块画布，可以设置宽高 ，默认 300 * 150

使用方式

1. 声明书写 canvas标签

2. 拿到canvas的dom

3. 调用方法 getContext (注意 此方法在prototype上)

 方法集合：

填充：

1. fillStyle， 设置填充颜色  ，不设置默认为黑色

2. fillRect ， 4个参数  x y  宽 高

画笔：

3. strokeStyle 设置画笔的颜色

4. strokeRect 4个参数  x y  宽 高的颜色 // 绘制被填充的矩形

5. rect  4个参数  x y  宽 高 // 创建矩形，没有画上

6. ctx.stroke()  // 画上去

7. fill  把图形画到画布上

8. closePath() // 闭合

9. arc(300, 100, 50, 0, Math.PI * 2, false ) // 6个参数  x y 圆心坐标，半径  起始角度           3.14*2  ,false为顺时针， true 逆时针

10  arcTo(150,20,150,70,50) // 起始坐标 终止坐标  半径

11 translate （300,300）设置基准点

小时钟案例

---------------------------

老陈讲解

 二次贝塞尔曲线和三次贝塞尔曲线

Path2D

样式和颜色控制

线性渐变 

径向渐变

 圆锥渐变

图案样式 Patterns 

 线段和虚线样式设置

 阴影 

绘制图像和视频 

 文字绘制与对齐

移动TRanslating

变形 Transforms 

位移

 旋转

 合成

具体查文档

HTML 5 Canvas 参考手册

刮刮卡

 裁剪

状态的保存和恢复 

像素操作 

所有参数 

 高级封装绘制元素和实现元素交互

通过class类进行封装 

 canvas实现在线画板

粗线条细线条保存签名橡皮擦清空画布

绘制时钟