当我在与上一行相同的坐标中绘制一条线时,如何控制会发生什么? 目前颜色变得更亮,但我希望它保持不变(或更准确地说 - 我希望第二行位于第一行之上)。
我尝试这样做:
_context.setGlobalCompositeOperation(Composite.SOURCE_OVER);
但它似乎仅在 Canvas 上绘制 Canvas 时才有效,而在同一 Canvas 上绘制时则无效。
最佳答案
假设您的颜色具有完整的 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。它薄而精确。
至少在绘制水平或垂直线(或矩形)时,解决方案是考虑线的宽度并在整数或半整数坐标处绘制。
关于javascript - HTML5 canvas - 控制在同一位置绘制时发生的情况,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13740069/