<canvas>元素是HTML5中的绘图元素，通过定义一个画布区域，然后使用javascript动态地在这个区域里面绘制图形，对于2D和3D图形都可以绘制，我们将其分成2D上下文和WebGL两大块内容来一起来学习
<canvas id="draw" width="500" height="400"></canvas>
用canvas 绘制图形时经过以下几个步骤：
1.获取canvas对象.
2.使用canvas对象的getContext方法来获取图形上下文，在draw函数中将参数设为2d.
3.填充与绘制边框
填充（使用指定样式［颜色、渐变、图像、模式等］填充图形）和描边（图形的边缘画线）分别为fillStyle和strokeStyle，需要注意一点，fillStyle和strokeStyle会被延用至重新设置这两个值！
4.lineWidth用来指定图形边框的线宽。
5.fillStyle和strokeStyle分别指定绘图时填充的颜色 和边框的颜色。
var draw = document.getElementById(‘draw’);
//确定是否支持canvas
if(draw.getContext){
//这样就取得绘图上下文对象的引用，画图便可以开始了！
var context = draw.getContext(‘2d’);
//绘制黑色矩形
context.strokeStyle = “#000”;
context.strokeRect(10,10,50,50);
//绘制描边矩形
context.fillStyle = ‘#0000ff’;
context.fillRect(30,30,50,50);
}
6.绘制矩形
context.fillRect(x,y,width,height) //填充矩形
context.strokeRect(x,y,width,height)//绘制矩形边框
context.clearRect(x,y,width,height)//擦除指定矩形区域中的图形，使得矩形区域中的颜色变成透明
7.使用路径
绘制除正方形、长方形外的图形
开始创建路径 context.beginPath();
创建图形的路径
路径创建完成后关闭路径 context.closePath();
设定绘制样式，调用绘制方法，绘制路径 context.fillStyle="rgba(255,0,0,1)"
context.strokeStyle="rgba(255,0,0,1)" context.fill() context.stroke()
例：
1.context.beginPath();
2.绘制圆形路径
context.arc(x,y,radius,startAngle,endAngle,anticlockwise)
x为起点的横坐标，y为绘制圆形的起点的纵坐标，radius为圆形半径，startAngle为开始角度，endAngle为结束角度，anticlockwise为是否按照顺时针方向绘制 true为顺时针 false 为逆时针
绘制直线
moveTo(x,y) 将光标移动到指定坐标点，绘制直线时以这个坐标点为起点
lineTo(x,y) 以moveTo中指定的点为起点，参数中指定的为终点绘制一条直线
绘制贝切尔曲线
context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)
绘制贝切尔曲线需要两个控制点 cp1x cp1y cp2x cp2y分别对应两个控制点的x和y坐标
X为贝切尔曲线的终点横坐标 y为贝切尔曲线的终点纵坐标
3.context.closePath();
4.context.fillStyle="rgba(255,0,0,1)" context.fill()