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

我在画布上使用带有多个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对象的原点的矩形 . 请帮我理解我的误解 .

回答(2)

2 years ago

也许您正在寻找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])

2 years ago

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

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