下面例子为用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>
