javascript - HTML5 canvas - 控制在同一位置绘制时发生的情况

Question

当我在与上一行相同的坐标中绘制一条线时，如何控制会发生什么？目前颜色变得更亮，但我希望它保持不变(或更准确地说 - 我希望第二行位于第一行之上)。

我尝试这样做:

_context.setGlobalCompositeOperation(Composite.SOURCE_OVER);

但它似乎仅在 Canvas 上绘制 Canvas 时才有效，而在同一 Canvas 上绘制时则无效。

Answer 1

假设您的颜色具有完整的 Alpha，您的问题可能与您在整数坐标处绘制宽度为 1 的线条有关。

看下面的 fiddle :http://jsfiddle.net/RAgak/

在整数坐标处绘制会使线条更宽且模糊。第二次画的话就会变得更亮。但是当我在半整数坐标处绘制线条时，这种情况不会发生。

var y = 10;
c.beginPath();
c.moveTo(0, y);
c.lineTo(30, y);
c.stroke(); // fuzzy
c.beginPath();
c.moveTo(50, y+0.5);
c.lineTo(80, y+0.5);
c.stroke(); // ok

这是因为线条是在它们所在的所有像素上绘制的(在 Canvas 上定位是 float 的)。当你想在 Canvas 上用 JavaScript 绘制精确的垂直或水平线时，最好将它们设置为半整数。

参见插图:第一条水平线是用 y 位置为 1 绘制的。这条线模糊且宽。第二条水平线的 y 位置为 4.5。它薄而精确。

至少在绘制水平或垂直线(或矩形)时，解决方案是考虑线的宽度并在整数或半整数坐标处绘制。