翻译html5画布

Question

我想知道如何翻译已经在html5画布上绘制的整个场景,例如5个像素.我知道translate方法只是翻译画布的坐标系,但我想知道是否有一种方法可以将已经绘制的整个场景转换为画布.

Answer 1

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

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

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

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