javascript - HTML Canvas - 描边路径上的发光轮廓？

Question

我注意到 Canvas 上有一个奇怪的轮廓。下面是一个例子:

http://jsfiddle.net/0Lzd562x/6/

蓝色描边矩形是在红色描边矩形之后绘制的，但看起来它们混合在一起或者线条上有发光。我尝试将 lineWidth 设置为更大的值，它解决了问题，但我想要细线。还尝试使用 ctx.lineTo() 绘制矩形，但结果相同。我希望后一个(蓝色)矩形位于顶部，覆盖红色矩形的右侧。

Answer 1

发生的情况是，您沿着像素之间的缝隙绘制线条，而不是在像素本身的中间绘制线条。这会导致线条在每个像素上以一半不透明度渲染。由于不透明度，两个方 block 的颜色都被添加到 2 个像素，从而形成一条 2px 的紫色粗线。

分割线的原因是抗锯齿。您可以找到fantastic talk about it作者:史蒂夫·威滕斯

您无法关闭抗锯齿功能，但可以通过将 .5 添加到像素的起始 x/y 来在像素中间绘制线条。矩形，只要大小是整数

这是生成的 fiddle :http://jsfiddle.net/0Lzd562x/11/