canvas路径绘制
惯例,先贴代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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 不再赘述。
myGitgub https://github.com/mfx55
希望我的博客能帮到你