Javascript 翻译html5画布

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

除非您拍摄屏幕截图并进行转换

然而，只是插入

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

就在您的绘图代码完成此操作之前

---

参考：

您可以应用转换并调用画布本身中的drawImage传递

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

这样做时，原始内容仍将在下面。 根据您试图实现的效果，设置GlobalComposite操作可能会对您有所帮助

---

但您可能需要使用drawImage将第一个画布复制到第二个画布，清除当前画布，应用变换并从副本中绘制。

我已经介绍了这一点，并且（至少我认为我）明确表示这不是我想要的。那个翻译将翻译我以后画的任何东西，而不是已经画的任何东西。然而，你的截图解决方案可能是我想要的。您有如何操作的说明吗？Canvas对象有一个名为toDataUrl的方法。看这个问题，这听起来像我想要的。我会尝试一下，让你知道它是否对我有效。这个解决方案对我非常有效。然而，当涉及到缩放时，它就不能很好地工作。我有一个画布，其中的缩放比例是这样的，即绘图区域的宽度和高度分别为120000和60000。画布元素本身的宽度为1200，高度为600，因此在绘制之前在坐标系上执行缩放变换。无论如何，问题是，如果我将图像复制到第二个画布上，清除当前图像，然后像你说的那样应用变换和复制，平移和缩放会使图像模糊。我只是想知道你是否知道如何让它不模糊。是的，这就是发生的事情。问题是，如果我从具有高分辨率的主画布绘制到备份画布，它将始终使用基本1200x600分辨率，而不是按比例放大的1200000x600000分辨率。此外，对于我来说，来回的解决方案是可以的，因为它只需要在用户想要的时候这样做，而且不会一直这样做。谢谢你的提醒！