canvas之画一条线段

 

 1  var canvas=document.getElementById("canvas");
 2     //设置绘图环境
 3     var cxt=canvas.getContext(\'2d\');
 4     //开启新路近
 5     cxt.beginPath();
 6     // 设置笔触的宽度
 7     cxt.lineWidth=10;
 8     //设置笔触的颜色
 9     cxt.strokeStyle="#00ff00";
10     //设定笔触的位置
11     cxt.moveTo(20,20);
12     //设置移动的位置
13     cxt.lineTo(100,20);
14     //画线
15     cxt.stroke();//这个时候的线已经出来了
16     //关闭路径
17     cxt.closePath();
18     //凡事路径图形必须先开始路径,画完之后必须结束路径