Html 5 canvas避免了重叠时的填充行为 [英] Html 5 canvas avoid fill behaviour on overlap

问题描述

看到上面的图片我有我的等距正方形之间的可见线，这是由每个正方形sligthly彼此重叠造成的。现在重叠是不可避免的，由于坐标系统我用来绘制（我不想改变它）。

这是代码im使用绘制正方形

  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（）; 
  

我想要实现的是绘制任何可见轮廓的正方形，方法来停止填充做什么它当前是重叠？

编辑：我会提到每个正方形绘制与略有不同的颜色，所以我不能只是填充整个

解决方案

p>比较：

。

As you can see in the picture above I have visible lines between my isometric squares, this is caused by each square sligthly overlapping each other. Now the overlapping is unavoidable due to the coordinate system i use to draw with (And I don't want to change it).

This is the code im using to draw the squares

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

What I want to achieve is to draw the squares with out any visible outlines, so basically is there a way to stop fill doing what it currently is on overlap?

EDIT: I will mention each square is drawn with a slightly different color so I can't just fill the whole area with one color and be done (it just looks all black but each color differs by 1 in either the red or blue channel)

解决方案

Compare this:

http://jsfiddle.net/HmVtz/

With this:

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

See the difference?

The difference in the code is that I'm drawing on a half pixel instead of a pixel. Canvas is weird like that. Read up on anti-aliasing/subpixel rendering sometime.

For a simple explanation of why this is, see the Ask Professor Markup here.

这篇关于Html 5 canvas避免了重叠时的填充行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！