惯例，先贴代码：
1 /**
2 * Created by Administrator on 2016/1/27.
3 */
4 function draw (id){
5 var canvas = document.getElementById(id);
6 var context = canvas.getContext('2d');
7 context.beginPath();
8 context.moveTo(20,30);
9 context.lineTo(100,200);
10 context.rect(50,50,100,100);
11 context.arc(50,50,100,0,Math.PI*2,true);
12 context.closePath();
13 context.fillStyle = "FF6100";
14 context.strokeStyle = "0000FF";
15 context.lineWidth = 2;
16 context.fill();
17 context.stroke();
18 }
代码解释：此代码会生成一条直线，一个矩形，一个圆形。
这种路径绘制方式分为三步：
1）创建绘图路径；
1 context.beginPath(); 2 context.moveTo(20,30); 3 context.lineTo(100,200); 4 context.rect(50,50,100,100); 5 context.arc(50,50,100,0,Math.PI*2,true); 6 context.closePath();
2）创建绘图样式；
1 context.fillStyle = "FF6100"; 2 context.strokeStyle = "0000FF"; 3 context.lineWidth = 2;
3）绘制图形。
1 context.fill(); 2 context.stroke();
自己总结：绘制直线时应注意moveTo()和lineTo()应结合着用，前者是起始坐标，后者是终止坐标。
rect(x,y,width,heigth)和arc 不再赘述。