HTML Canvas-笔触路径上发光的轮廓？

Question

我在画布上注意到一个奇怪的轮廓。下面是一个示例：

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

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

Answer 1

正在发生的事情是沿着像素之间的分割线绘制线条，而不是在像素本身的中间。这将使线条在每个像素上呈现为半透明。由于不透明，两个正方形的颜色都被添加到了2个像素上，从而导致了2px的紫色粗线。

行拆分的原因是抗锯齿。您可以找到史蒂夫·威腾斯（Steve Wittens）的fantastic talk about it

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

以下是产生的小提琴：http://jsfiddle.net/0Lzd562x/11/