canvas绘制曲线

代码：

 1 /**
 2  * Created by Administrator on 2016/1/28.
 3  */
 4 function draw (id){
 5     var canvas = document.getElementById(id);
 6     var context = canvas.getContext("2d");
 7     context.beginPath();
 8     context.moveTo(100,180);
 9     context.lineTo(200,50);
10     context.lineTo(300,200);
11     context.strokeStyle = "rgba(0,0,0,0.4)"
12     context.lineWidth = 2;
13     context.stroke();
14 //  绘制辅助线
15     context.beginPath();
16     context.moveTo(80,120);
17 //    context.arcTo(150,60,180,130,50);
18 //    context.quadraticCurveTo(200,50,300,200);
19 //    context.bezierCurveTo(110,80,260,100,300,200);
20     context.lineWidth = 3;
21     context.strokeStyle = "rgba(255,135,0,1)";
22     context.stroke();
23 }

View Code

绘制曲线三种方式：

　　1）使用arcTo方法：

　　　　　　格式：arcTo(x1,y1,x2,y2,radius) :两个坐标点，一个半径。

　　2）使用quadraticCurveTo方法：

　　　　　　格式：quadraticCurveTo(cpx,cpy,x,y):一个控制点，一个结束点。

　　　　　　可以用moveTo()来确定开始点。

　　　　　　不用moveTo()方法来确定开始点的话，则为当前路径的中的最后一个点。

　　　　　　

　　3）使用bezierCurveTo()方法：

　　　　　　格式：bezierCurveTo(cpx1,xpy1,cpx2,cpy2,x,y):两个控制点，一个结束点。

　　　　　　当然，可以用moveTo()确定开始点。