转换HTML5画布

Question

我想知道如何将已经绘制在HTML5画布上的整个场景进行平移，例如向下平移5像素。我知道translate方法只是平移了画布的坐标系，但我想知道是否有一种方法可以平移已经绘制在画布上的整个场景。

- George

Answer 1

你可以应用变换并调用drawImage将画布本身传递进去。

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

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

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

- Kyle Jones

---

这听起来像是我想要的。我会尝试一下，如果它适用于我，我会让你知道的。 - George

这个解决方案对我非常有效。但是，当涉及到缩放时，它的效果就不太好了。我有一个画布，缩放比例使得绘图区域的宽度和高度为120000和60000。画布元素本身的宽度为1200，高度为600，因此在绘制之前对坐标系执行缩放变换。无论如何，问题在于如果我将其复制到第二个画布中，清除当前画布，并像您所说的那样应用变换和复制，则平移和缩放会使图像模糊。只是想知道您是否知道如何使其不模糊。 - George

是的，那正是在发生的事情。问题在于如果我从具有高分辨率的主画布绘制到备用画布上，它总是会使用基本的1200x600分辨率进行绘制，而不是放大后的1200000x600000分辨率进行绘制。此外，来回切换的解决方案对我的目的来说是可以的，因为只有在用户需要时才需要这样做，并且不需要持续进行该操作。 - George

我最近遇到了类似的需求，这里有一个工作解决方案的jsFiddle。感谢您的提示！http://jsfiddle.net/RgXKN/ - Chad

Answer 2

除非你截屏并翻译。

然而，只需插入

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

在你的绘图代码之前加上这个应该就可以了。

参考资料：MDN Canvas 教程（变换）

- pop850

---

我已经涵盖了这个问题，并且（至少我认为）已经清楚表明那不是我想要的。那个翻译将会翻译我之后所画的任何东西，而不是已经画好的内容。然而，你提供的截图解决方案可能是我想要的。你有如何操作的说明吗？ - George

Canvas对象有一个名为toDataUrl的方法。请参见此问题https://dev59.com/GXNA5IYBdhLWcg3wgeId。 - Ruan Mendes