使用HTML5 Canvas绘制直线或折线等线条的方法讲解
|
<canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;"> 您的浏览器不支持canvas标签。 </canvas>
<script type="text/javascript"> //获取Canvas对象(画布) var canvas = document.getElementById("myCanvas"); //简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误 if(canvas.getContext){ //获取对应的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> 显示效果如下：
使用canvas绘制带颜色的直线 大家都知道，在现实世界中，画笔也是多种多样的，并且具有各种不同的颜色。同样的，Canvas的画笔CanvasRenderingContext2D对象也同样可以具有你所需要的各种颜色。在上面的代码示例中，我们没有指定颜色的话，Canvas的画笔就默认为最常见的黑色。 现在我们再次使用Canvas的画笔绘制一条蓝色的直线(基于页面简洁考虑，下面只给出关键的JavaScript代码，请同时参考上面完整的代码示例)。
XML/HTML Code复制内容到剪贴板
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML5 Canvas绘制线条入门示例</title> </head> <body>
<!-- 添加canvas标签，并加上红色边框以便于在页面上查看 --> （编辑：焦作站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
