canvas路径绘制

惯例，先贴代码：

 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 }

View Code

代码解释：此代码会生成一条直线，一个矩形，一个圆形。

这种路径绘制方式分为三步：

　　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 不再赘述。