在html5画布中绘制单像素线
在html5画布中绘制单像素线
提问于 2012-02-16 20:41:06
当我尝试用下面的代码绘制单像素黑线时：
context.strokeStyle = '#000';
context.beginPath();
context.moveTo(x1, y1);
context.lineTo(x2, y2);
context.lineWidth = 1;
context.stroke();
context.closePath(); 我有一个以上的灰色边框像素线。如何修复它？
下面是一个http://jsfiddle.net/z4VJq/示例
回答 1
Stack Overflow用户
回答已采纳
发布于 2012-02-16 21:08:37
使用这些坐标调用您的函数：drawLine(30,30.5,300,30.5);。在jsFiddle中尝试一下。
问题是您的颜色将位于边缘，因此颜色将位于边缘上方的像素的一半和边缘下方的一半。如果将线条的位置设置在整数的中间，则会在像素线内绘制线条。
这张图片(来自下面的链接文章)说明了它：
你可以在Canvas tutorial: A lineWidth example上阅读更多关于这方面的内容。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9311428
复制相关文章
相似问题