下面例子为用canvas标签画多条直线 复制代码代码如下: index_three 您的浏览器不支持canvas标签。 <br />//获取Canvas对象(画布) <br />var canvas = document.getElementById("myCanvas"); <br />//简单地检测当前浏览器是否支持Canvas对象,以免在一些不支持html5的浏览器中提示语法错误 <br />if(canvas.getContext){ <br />//获取对应的CanvasRenderingContext2D对象(画笔) <br />var ctx = canvas.getContext("2d"); <br />//线条的颜色 <br />ctx.strokeStyle="#FF9933"; <br />//线条的宽度像素 <br />ctx.lineWidth=10; <br />//线条的两关形状 <br />ctx.lineCap="round"; <br />//注意,Canvas的坐标系是:Canvas画布的左上角为原点(0,0),向右为横坐标,向下为纵坐标,单位是像素(px)。 <br />//开始一个新的绘制路径 <br />ctx.beginPath(); <br />//定义直线的起点坐标为(10,10) <br />ctx.moveTo(50, 50); <br />//定义直线的终点坐标为(50,10) <br />ctx.lineTo(350, 250); <br />ctx.moveTo(50, 240); <br />ctx.lineTo(360, 60); <br />ctx.moveTo(50, 200); <br />ctx.lineTo(300, 40); <br />//沿着坐标点顺序的路径绘制直线 <br />ctx.stroke(); <br />//关闭当前的绘制路径 <br />ctx.closePath(); <br />} <br />