HTML 5画布避免重叠时填充行为

Question

如上图所示，我在等距正方形之间看到了可见的线条，这是由于每个正方形略微重叠造成的。现在，由于我使用的坐标系绘制（而且我不想改变它），重叠是不可避免的。

这是我用来绘制正方形的代码：

cRenderContext.beginPath();

cRenderContext.moveTo(iPosX, iPosY);
cRenderContext.lineTo(iPosX + iTileWidthIncrement, iPosY - iTileHeightIncrement);
cRenderContext.lineTo(iPosX + iTileWidth, iPosY);
cRenderContext.lineTo(iPosX + iTileWidthIncrement, iPosY + iTileHeightIncrement);
cRenderContext.lineTo(iPosX, iPosY);

cRenderContext.fillStyle = "rgba(1, 0, 1, 1)";
cRenderContext.fill();
cRenderContext.closePath();

我想要实现的是绘制没有任何可见轮廓线的正方形，基本上有一种方法可以阻止填充在重叠时所做的事情吗？

编辑：我要提到每个正方形都用略微不同的颜色绘制，所以我不能只用一种颜色填充整个区域并完成（看起来只是全部是黑色，但每种颜色在红色或蓝色通道上都不同）。

- Tristan

---

没有轮廓线的话，它只是一个大黑色画布，对吧？ - James

实际代码（和图片）中，每个正方形的颜色略有不同，红色或蓝色通道的RGB值递增1。 - Tristan

你真的是指“重叠”吗？每个等距正方形的边缘没有接触，对吧？你想要填补它们之间的空隙吗？ - James

是的，每个正方形实际上都重叠在其他正方形上，它们之间没有间隙，这就是我不理解为什么会出现边缘的原因？ - Tristan

Answer 1

对比一下：

http://jsfiddle.net/HmVtz/

和这个：

http://jsfiddle.net/HmVtz/1/

看到区别了吗？

代码的区别在于我绘制的是半个像素而不是一个像素。Canvas就是这么奇怪。有时间可以了解一下抗锯齿/次像素渲染。

关于为什么会这样，可以在这里查看Ask Professor Markup的简单解释here。

- Simon Sarris

---

啊啊啊啊啊！是的，当然就是这样，我知道这一点，但它从我脑海中溜走了！非常感谢，这让我发疯了！ - Tristan