绘制环境
getContext('2d')：目前只支持2d场景
不能在样式里设置宽高，否则变成等比缩放（包括里面画的内容也会等比缩放）
绘制图形：
- 绘制方块：
fillRect(L,T,W,H); 填充的方块
strokeRect(L,T,W,H); 带边框的方块
- 设置绘图：
fillStyle：填充颜色（绘制canvas是有顺序的）
lineWidth：线宽度，是一个数值
strokeStyle：边线颜色
- 绘制路径：
beginPath：开始绘制路径（防止后面设置影响上面绘图）
closePath：结束绘制路径（闭合绘图）
moveTo：移动到绘制的新目标点
lineTo：新的目标点
stroke：画线，默认黑色
fill：填充，默认黑色
rect：矩形区域（与fill组成fillRect方法）
clearRect：删除一个画布的矩形区域
save：保存路径（与restore一起组成一个设置区）
restore：恢复路径
- 绘制圆（圆弧）
arc(x,y,半径,起始弧度,结束弧度,旋转方向)
x,y：起始圆心坐标
起始位置在3点钟位置
弧度与角度的关系：弧度=角度*Math.pi/180
旋转方向：顺时针（默认：false）、逆时针（true）
- 变换（与css3中的变化类似）：变换的是画布
translate（偏移）：从起始点为基准点，移动当前坐标位置
rotate（旋转）：参数为弧度（默认的旋转中心是左上角）
scale（缩放）：x，y方向缩放到原本大小的倍数
用Canvas做时钟的原理：
- 首先绘制小刻度，是由60个6度的圆弧拼成，类似于马车轮,半径为r
- 在同样的圆心位置绘制白色表盘，盖住圆弧中间的线，半径为r*19/20
- 跟步骤1类似，绘制12个角度为30度的圆弧，长度为r
- 跟步骤2类似，,绘制白色表盘，半径为r*18/20
- 绘制时针分针秒针，获取时间对象
- 计时器调用以上步骤
Canvas特点：
- Canvas提供的功能更原始，适合像素处理，动态渲染和大数据量绘制
- Canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
- 快速、轻量、灵活
