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 }