使用canvas元素，相当于一张空的画布
height:设置画布组件高度
width:设置画布组件宽度
在canvas上绘图三个步骤：
①获取<canvas />元素对应的DOM对象，这是一个Canvas对象
②调用Canvas对象的getContext(‘2d’)方法，注意d是小写，该方法返回一个CanvasRenderingContext2D对象，该对象即可绘图
③调用CanvasRenderingContext2D对象的方法绘图
CanvasRenderingContext2D提供的方法：
arc:向Canvas的当前路径上添加一段弧
arcTo:同上
beginPath:开始定义路径
closePath:关闭定义路径
bezierCurveTo添加一段贝济埃曲线
clearRect:擦出指定矩形区域上绘制的图形
clip:从画布上裁剪出一块
createLinearGradient:创建一个线性渐变
createPattern:创建一个圆形平铺
createRadialGradient:创建一个圆形渐变
drawImage:绘制位图
drawImage(图片，目标X，目标Y)；
drawImage(图片，目标X，目标Y，目标宽，目标高)；
fill:填充当前路径
fillRect:填充一个矩形区域
fillText:填充字符串
lineTo:从当前结束点连接到指定点
moveTo:从当前结束点移动到指定点
quadraticCurveTo:添加一段二次曲线
rect:添加一个矩形
stroke:绘制边框
strokeRect:绘制一个矩形边框
strokeText:绘制字符串的边框
save:保存当前的绘图状态
restore:恢复之前保存的绘图状态
retate:旋转坐标系统
scale:缩放坐标系统
translate:平移坐标系统
transform(m11, m12, m21, m22, dx, dy)：组成矩阵并平移
CanvasRenderingContext2D提供的属性：
fillStyle:设置 填充 路径时所使用的填充风格
strokeStyle:设置 绘制 路径时所使用的填充风格
font:设置绘制字符串所使用的字体
globalAlpha:设置全局透明度
globalCompositeOperation:设置全局的叠加效果
lineCap:设置线段端点的绘制形状
lineJoin:设置线条连接点的风格(meter:直角连接，round:圆角连接，bevel:斜边连接)
miterLimit:当把lineJoin属性设为meter风格时，该属性控制锐角箭头的长度
lineWidth:设置笔触线条的宽度
shadowBlur:设置阴影的模糊度
shadowColor:设置阴影的颜色
shadowOffsetX:设置阴影在X方向上的偏移
shadowOffsetY:设置阴影在Y方向上的偏移
textAlign:设置字符串的水平对齐方式
textBaseAlign:设置字符串的垂直对齐方式
控制填充风格：
createLinearGradient(xStart, yStart, xEnd, yEnd)，创建一个线性渐变
createRadialGradient(xStart, yStart, xEnd, yEnd, radiusEnd)：设置圆形渐变
addColorStop(offset, color)向线性渐变中添加颜色
createPattern(image, repetitionStyle)：设置位图填充
位图处理：
clip()：将设置的路径进行剪切
getImageData(x, y, w, h)：获取该矩形区域
putImageData(data, x, y)：data为上述方法的返回值，将data放入x,y开始的区域
输出位图
toDataURL(type)：canvas对应的位图编码成DataURL格式的字符串
