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();

我想要实现的是绘制没有任何可见轮廓的方块,所以基本上有一种方法可以停止填充当前重叠的内容吗？

编辑:我会提到每个方块都是用略微不同的颜色绘制的,所以我不能用一种颜色填充整个区域并完成(它只是看起来全黑,但每个颜色在红色或蓝色通道中相差1)

Answer 1

比较一下:

http://jsfiddle.net/HmVtz/

有了这个:

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

看到不同？

代码的不同之处在于我使用半像素而不是像素.画布很奇怪.有时读取抗锯齿/子像素渲染.

有关其原因的简单解释,请参阅此处的Ask Professor Markup .