然而，在一个整像素的范围内绘制半个像素宽的线段是不可能的，所以左右两个方向上的半像素都被扩展为 1 个像素。正如上图中左图，本来我们想要将线段绘制在深灰色的区域内，但实际上浏览器却将其延伸绘制到整个灰色的范围内。

另一方面，我们来看看如果将线段绘制在某 2 个像素之间的那个像素中，效果就如上图中右图。这条垂直线段绘制在两个像素之间，这样的话，中线左右两端的那半个像素就不会再延伸了，它们合半起来恰好占据 1 像素的宽度。所以说， 如果绘制一条真正 1 像素宽的线段，你必须将该线段绘制在某两个像素之间的那个像素中，而不能将它绘制在两个像素的交界处 。

所有浏览器的Canvas实现都使用了 抗锯齿 技术，以便创建出 亚像素 线段的绘制效果来。

再回过头来看上一节中， 绘制的网格线 ，我们可以看到它的线条宽度其实不是真正的 1px 。也就是上面说的原因造成的。既然明白原因了，那我们就可以轻松修改上节中绘制的网格。

var x = 0.5; var y = 0.5; var w = myCanvas.width + .5; var h = myCanvas.height + .5;

效果如下：

将上面示例，绘制网格的代码，可以用javascript将其封装成为一个 drawGrid() 函数。

function drawGrid(color, stepX, stepY) { ctx.strokeStyle = color; ctx.lineWidth = 0.5; for (var i = stepX + 0.5; i < myCanvas.width; i += stepX) { ctx.beginPath(); ctx.moveTo(i, 0); ctx.lineTo(i, myCanvas.height); ctx.stroke(); } for (var i = stepY + 0.5; i < myCanvas.height; i += stepY) { ctx.beginPath(); ctx.moveTo(0, i); ctx.lineTo(myCanvas.width, i); ctx.stroke(); } }

其中 color 是网格线颜色， stepX 是 x 轴的网格间距， stepY 是 y 轴的网格间距。只需要在 drawScree() 中绘制网格线刻度，调用 drawGrid() 函数：

function drawScreen() { var dx = 50, dy = 50, // 初始坐标原点 x = 0, y = 0, w = myCanvas.width, h = myCanvas.height, xy = 10; while (y < h) { y = y + dy; //横坐标的数字 ctx.font = "1px Calibri"; ctx.fillText(xy, x, y); xy += 10; } // 画竖线 y =0; xy =10; while (x < w) { x = x + dx; //纵坐标的数字 ctx.font = "1px Calibri"; ctx.fillText(xy,x,10); xy+=10; } drawGrid('#000', 50,50); }

最后的效果如下：

总结

这篇文章主要记录了如何在Canvas中绘制线段（路径）。简单的说，使用 moveTo(x,y) 、 lineTo(x,y) 和 stroke() 就可以绘制出一条线段，或者说多线段。另外使用 lineWidth 可以改变线段的宽度，而 strokeStyle 可以改变线段的颜色。不过，在Canvas中绘制路径时记得在开始时先调用 beginPath() 。

是不是很简单呀。不知道大家发现没有，在这篇文章中，看到绘制的线都是实线，那么在Canavs中有没有直接的API可以绘制虚线或者点划线呢？先思考一下，我们后续来回答。

大漠

常用昵称“大漠”，W3CPlus创始人，目前就职于手淘。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验，尤其专注对CSS3的研究，是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《 图解CSS3：核心技术与案例实战 》。

本文前端（javascript）相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: CSS、CSS3、浏览器、HTML、HTML5、、Java、其实、删除、核心技术、

分页：12

转载请注明
本文标题：Canvas学习：绘制线段
本站链接：
分享请点击：

1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责；
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性，不作出任何保证或承若；
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。

登录后可拥有收藏文章、关注作者等权限...

   注册     登录