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，该线条模糊且宽。绘制第二条水平线，y位置为4.5。它很薄而且精确。

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