html5使用canvas画一条线

10/24/2015来源:HTML教程人气:1066

  代码太简单了,就不废话了

  代码如下:

  var canvas=document.getElementById("canvas");

  //设置绘图环境

  var cxt=canvas.getContext('2d');

  //开启新路近

  cxt.beginPath();

  // 设置笔触的宽度

  cxt.lineWidth=10;

  //设置笔触的颜色

  cxt.strokeStyle="#00ff00";

  //设定笔触的位置

  cxt.moveTo(20,20);

  //设置移动的位置

  cxt.lineTo(100,20);

  //画线

  cxt.stroke();//这个时候的线已经出来了

  //关闭路径

  cxt.closePath();

  //凡事路径图形必须先开始路径,画完之后必须结束路径

html5使用canvas画一条线 三联