翻译html5画布

Question

我想知道如何翻译已经在html5画布上绘制的整个场景，例如5个像素。我知道translate方法只是翻译画布的坐标系，但我想知道是否有办法翻译已经绘制到画布上的整个场景。

Answer 1

您可以应用变换并调用drawImage传递画布本身。

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

这样做时，原始内容仍然在下面。 根据您尝试完成的效果，设置globalCompositeOperation可能会对此有所帮助。

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

Answer 2

除非您截取屏幕截图并进行翻译。

但是，只需插入

context.translate(0, 5)// or your values

在您的绘图代码之前应该做到这一点。

参考：MDN Canvas Tutorial (Transformations)