翻译html5画布

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

2010-08-02 George

您可以将转换和调用的drawImage传递画布本身。

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

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

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

来源

2010-08-02 21:08:13

这听起来像我想要的。我会试试看，并告诉你它是否适合我。 – George 2010-08-02 21:18:54

这个解决方案对我很好。但是，如果涉及到缩放，它也不能很好地工作。我有一个画布，其缩放比例使得绘图区域的宽度和高度分别为120000和60000.画布元素本身具有宽度1200和高度600，因此缩放变换在绘制之前在坐标系上执行。无论如何，问题在于如果将图像复制到第二个画布，清除当前图像并应用转换和复制（如您所说），则平移和缩放将会使图像模糊。只是想知道如果你知道如何使它不模糊。 – George 2010-08-03 19:03:55

是的，这正是发生了什么事情。问题是，如果我从具有高分辨率的主画布绘制到备份画布，它将始终使用基本1200x600分辨率绘制，而不是放大的1200000x600000分辨率。此外，来回解决方案对我来说是可以的，因为只有当用户想要时才需要这样做，而且不会那么做。 – George 2010-08-03 21:37:58

-1

除非你截图和翻译。

然而，你的绘制代码应该做的伎俩前右刚插入

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

。

参考：MDN Canvas Tutorial (Transformations)

来源

2010-08-02 21:01:33 pop850

我已经说过了，（至少我以为我）明确表示这不是我想要的。该翻译将翻译我以后绘制的任何内容，而不是任何已绘制的内容。但是，您的屏幕截图解决方案可能是我想要的。你有指示如何做到这一点？ – George 2010-08-02 21:06:40

Canvas对象有一个名为toDataUrl的方法。看到这个问题http://stackoverflow.com/questions/934012/get-image-data-in-javascript – 2010-10-20 18:05:13

回答

相关问题