使用HTML5 Canvas绘制直线或折线等线条的方法讲解

//获取对应的CanvasRenderingContext2D对象(画笔) var ctx = canvas.getContext("2d");

//注意，Canvas的坐标系是：Canvas画布的左上角为原点(0,0)，向右为横坐标，向下为纵坐标，单位是像素(px)。

//开始一个新的绘制路径

ctx.beginPath(); //定义直线的起点坐标为(10,10)

ctx.moveTo(10, 10); //定义直线的终点坐标为(50,10)

ctx.lineTo(50, 10); //沿着坐标点顺序的路径绘制直线

ctx.stroke(); //关闭当前的绘制路径

ctx.closePath(); }

</script> </body>

</html>

显示效果如下：
2016314110545325.png (473×319)

使用canvas绘制带颜色的直线

大家都知道，在现实世界中，画笔也是多种多样的，并且具有各种不同的颜色。同样的，Canvas的画笔CanvasRenderingContext2D对象也同样可以具有你所需要的各种颜色。在上面的代码示例中，我们没有指定颜色的话，Canvas的画笔就默认为最常见的黑色。

现在我们再次使用Canvas的画笔绘制一条蓝色的直线(基于页面简洁考虑，下面只给出关键的JavaScript代码，请同时参考上面完整的代码示例)。

XML/HTML Code复制内容到剪贴板

<!DOCTYPE html> <html>
<head> <meta charset="UTF-8">
<title>HTML5 Canvas绘制线条入门示例</title> </head>
<body>
<canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">
您的浏览器不支持canvas标签。 </canvas>
5/8 首页上一页 3 4 5 6 7 8 下一页尾页