首页 文章

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

提问于
浏览 次
0

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

javascript html5 canvas html5-canvas

2 回答

  • 0

    也许您正在寻找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])
    回复于
  • 1

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

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

    回复于

相关问题