使用 2d 上下文时，什么决定了 HTML5 画布上 context.fillRect 的原点？答案

【问题标题】：What determines the origin point for context.fillRect on an HTML5 canvas when using 2d context?使用 2d 上下文时，什么决定了 HTML5 画布上 context.fillRect 的原点？
【发布时间】：2023-03-27 04:49:01
【问题描述】：

我在画布上使用带有多个 bitmapSequence 对象的画架JS 库。我可能问错了问题，因为我不明白这是如何工作的。我会尽可能清楚地解释我的情况。

我在画布上放置多个 bitmapSequence 对象（精灵动画序列），并通过设置 x 和 y 属性在全局 tick() 函数中移动它们。一旦我设置了它们的 x 和 y 属性，我就会调用 stage.update()，它会重新渲染画布和所有带有新位置的 bitmapSequence 对象。

在 stage.update() 调用之后，但仍在 tick() 函数中，我将变量 ctx 分配给 canvas.getContext('2d')。然后我调用 ctx.fillRect(0, 0, 8, 8)。在这种情况下，fillRect 的 0,0 (x,y) 参数始终代表最后一个 bitmapSequence 对象的原点，我在 stage.update() 调用之前修改了该对象的 x 和 y 属性。

这意味着如果我在 0,0 处绘制一个矩形，它将显示在我使用的最后一个 bitmapSequence 对象的原点，并在我移动它时跟随 bitmapSequence。

如果我尝试获取 2d 上下文，并在 stage.update() 之前绘制一个矩形，它不会显示在画布上。

理想情况下，我希望能够相对于我希望的任何 bitmapSequence 对象的原点绘制矩形。请帮助我理解我的误解。

【问题讨论】：

标签： javascript html canvas html5-canvas

【解决方案1】：

也许您正在寻找translate() 函数？您的程序的行为对应于该函数的行为。所以，如果要重置相关绘图，请使用ctx.translate(-x_of_last_bitmapSequence, -y_of_last_bitmapSequence)。

或者你可以改变相对绘图的“起点”：

ctx.save();
ctx.translate(x, y);

ctx.strokeRect(0, 0, 30, 30) // strokes a square at coords [x, y]

ctx.restore(); // restores the original state (relative coords are at [0, 0])

【讨论】：

这似乎是我所需要的，但问题是它相对于我使用的最终 bitmapSequence 仍然有效。我无法让它在我的 bitmapSequence 数组中的所有索引上按预期工作。

【解决方案2】：

我可以使用easelJS 的Container 对象来代替它。它允许我将对象添加到容器中，并且容器中的对象随容器一起移动。容器中的对象具有相对于容器的 x/y 坐标，容器具有相对于画布的 x/y 坐标。效果和我预期的一样。

我仍然不知道 2D 上下文与画架JS 的结合是怎么回事。

【讨论】：