Question

我在画布上使用带有多个bitmapSequence对象的easelJS库。我可能会问错误的问题，因为我不明白这是怎么回事。我将尽可能清楚地解释我的情况。

我在画布上放置多个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）参数ALWAYS表示最后一个bitmapSequence对象的原点，我修改了stage.update（）调用之前的x和y属性。

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

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

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

Answer 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])

Answer 2

我能够使用easelJS的Container对象来实现这一目标。它允许我向容器添加对象，容器内的对象随容器移动。容器内的对象具有相对于容器的x / y坐标，容器具有相对于画布的x / y坐标。它就像我预期的那样工作。

我仍然不知道结合了easelJS的2D上下文是什么。

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

2 个答案: