canvas是html5新增的一个标签，它的主要作用是画矢量图，这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。canvas能做动画，但不是为动画而生，能做游戏，能做特别炫的效果，主要是为画图而生。

canvas标签为<canvas id="myCanvas" width="" height="">不支持canvas查看的内容<canvas>。canvas的绘制环境（必须取的canvas元素及绘图上下文):getContext("2d")，目前仅支持2D场景。
用canvas绘制路径：beginPath() ：开始一个路径；moveTo(x,y)： 把路径移到画布中的指定点,不创建路径；lineTo(x,y) ：添加一个新点、画线；stroke() ：绘制已定义好的路径；fillStyle：用来设置填充颜色；strokeStyle：用来设置描边颜色；closePath() ：关闭路径；fill() ：填充已定义好的路径；clearRect(x,y,width,height):删除一个画布的矩形区域。

绘制圆弧：arcTo(x1,y1,x2,y2,r)；x1、y1为绘制图形原本该达到的坐标  x2、y2为绘制圆弧的结束坐标  r为圆弧半径。

    绘制二次贝塞尔曲线quadraticCurveTo(dx1,dy1,x,y);dx1 dy1为转折点坐标  x,y为结束点坐标。

    绘制三次贝塞尔曲线：bezierCurveTo(dx1,dy1,dx2,dy2,x,y)  dx1 dy1为第一个转折点坐标dx2 dy2为第二个转折点坐标 x,y 为结束点坐标。

    canvas中的变换:变换translate(x,y)：偏移：从起始点为基准点，移动当前坐标;rotate：旋转：参数弧度;scale：缩放。canvas中的缩放：线性渐变：createLinearGradient(x1,y1,x2,y2);第一组参数：起始点坐标；第二组参数：结束点参数。addColorStop(位置，颜色)：添加渐变色。放射性渐变：createRadialGradient(x1,y1,r,x2,y2,r);参数：第一个圆的半径和坐标，第二个圆的半径和坐标。