javascript - 翻译 html5 Canvas

Question

我想知道如何翻译已在 html5 Canvas 上绘制的整个场景，例如向下移动 5 个像素。我知道翻译方法只是翻译 Canvas 的坐标系，但我想知道是否有一种方法可以翻译已经绘制到 Canvas 上的整个场景。

Answer 1

您可以应用转换并调用传入 Canvas 本身的 drawImage。

ctx.save();
ctx.translate(0, 5);
ctx.drawImage(canvas, 0, 0);
ctx.restore();

这样做时，原始内容仍会在下方。根据您要实现的效果，设置 globalCompositeOperation 可能会帮助您。

但您可能需要先使用 drawImage 复制到第二个 Canvas ，清除当前 Canvas ，应用转换并从副本中绘制。