您现在的位置: 万盛学电脑网 >> 程序编程 >> 网页制作 >> Html5 >> 正文

html5使用canvas画一条线

作者:佚名    责任编辑:admin    更新时间:2022-06-22

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

  代码如下:

  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画一条线 三联