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

Question

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

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

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

Answer 1

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

分割线的原因是抗锯齿。 您可以在Steve Wittens那里找到有关它的精彩演讲

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

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