javascript - HTML5 画布 - 控制在同一个地方绘图时会发生什么

Question

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

我试着做：

_context.setGlobalCompositeOperation(Composite.SOURCE_OVER);

但它似乎仅在画布上绘制画布时才有效，而不是在同一画布上绘制时。

Answer 1

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

看看下面的小提琴：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

这是因为线是在它们所覆盖的所有像素上绘制的（在画布上定位是浮动的）。当你想在画布上用 JavaScript 绘制精确的垂直或水平线时，你最好将它们放在半个整数中。

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

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