绘制一个像素宽的细线，在使用html5 canvas实现时要特别注意确保你的所有坐标点是整数，否则html5会自动实现边缘反锯齿，感兴趣的朋友可以看下效果图
正统的html5 canvas中如下代码
ctx.linewidth = 1; ctx.beginpath(); ctx.moveto(10, 100); ctx.lineto(300,100); ctx.stroke();
运行结果绘制出来的并不是一个像素宽度的线
感觉怎么好粗啊，跟常常见到的网页版各种绘制线效果
很不一样，难道html5 canvas就没想到搞好点嘛
其实这个根本原因在于canvas的绘制不是从中间开始的
而是从0～1，不是从0.5～1 + 0～0.5的绘制方式，所以
导致fade在边缘，看上去线很宽。
解决方法有两个，一个是错位覆盖法，另外一种是中心
平移(0.5,0.5)。实现代码如下：
错位覆盖法我已经包装成一个原始context的函数
/** * <p> draw one pixel line </p> * @param fromx * @param formy * @param tox * @param toy * @param backgroundcolor - default is white * @param vertical - boolean */ canvasrenderingcontext2d.prototype.onepixellineto = function(fromx, fromy, tox, toy, backgroundcolor, vertical) { var currentstrokestyle = this.strokestyle; this.beginpath(); this.moveto(fromx, fromy); this.lineto(tox, toy); this.closepath(); this.linewidth=2; this.stroke(); this.beginpath(); if(vertical) { this.moveto(fromx+1, fromy); this.lineto(tox+1, toy); } else { this.moveto(fromx, fromy+1); this.lineto(tox, toy+1); } this.closepath(); this.linewidth=2; this.strokestyle=backgroundcolor; this.stroke(); this.strokestyle = currentstrokestyle; };
中心平移法代码如下：
ctx.save(); ctx.translate(0.5,0.5); ctx.linewidth = 1; ctx.beginpath(); ctx.moveto(10, 100); ctx.lineto(300,100); ctx.stroke(); ctx.restore();
要特别注意确保你的所有坐标点是整数，否则html5会自动实现边缘反锯齿
又导致你的一个像素直线看上去变粗了。
运行效果：
现在效果怎么样，这个就是html5 canvas画线的一个小技巧
觉得不错请顶一下。
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注！
相关推荐：
html5 canvas实现画未闭合的路径及渐变色的填充方法
html5 canvas实现画直线与设置线条的样式
以上就是html5 canvas实现绘制一个像素宽的细线的详细内容。