HTML5画布和线宽

Question

我在画布上画线条图.线条画得很好.缩放图形,绘制每个线段,颜色正常等等.我唯一的问题是在视觉上线宽变化.它几乎就像书法笔的笔尖.如果笔划向上,则线条很薄,如果笔划是水平的,则线条较粗.

我的线条粗细是不变的,我strokeStyle的设置为black.我没有看到画布的任何其他属性影响这种变化的线宽但必须有.

Answer 1

现场演示

我的现场演示基本上只是重新创建了MDN所说的内容.对于偶数笔划宽度,您可以使用整数作为坐标,对于您想要使用的奇数笔划宽度.5可以获得正确填充像素的清晰线条.

来自MDN文章

如果考虑从(3,1)到(3,5)的线路厚度为1.0的路径,最终会得到第二个图像中的情况.要填充的实际区域(深蓝色)仅延伸到路径两侧的像素中间.必须渲染这种近似值,这意味着这些像素仅部分遮蔽,并且导致整个区域(浅蓝色和深蓝色)填充的颜色仅为实际笔划颜色的一半.这是前面示例代码中1.0宽度行所发生的情况.

要解决这个问题,您必须非常精确地创建路径.知道1.0宽度线将半个单元延伸到路径的任一侧,创建从(3.5,1)到(3.5,5)的路径导致第三个图像中的情况 - 1.0线宽完全结束精确填充单个像素垂直线.

Answer 2

尝试lineCap = "round"并lineJoin = "round"。请参阅本PDF中的“线条样式”以了解这些参数的作用。

2015 年 7 月 17 日编辑：很棒的备忘单，但链接已失效。据我所知， http://www.cheat-sheets.org/saved-copy/HTML5_Canvas_Cheat_Sheet.pdf上有一份副本。