image - html5 : copy a canvas to image and back

Question

我在 Canvas 元素上实现了放大和缩小功能。它的工作原理是缩放 Canvas ，平移它，然后重新绘制整个场景。问题是重新绘制所有内容需要花费大量时间，因为我的 Canvas 上有很多东西。

我需要一种方法来将 Canvas 复制到图像对象，而不是将图像复制回 Canvas 而不会降低质量。将canvas复制到javascript变量，以及稍后将此变量复制回 Canvas 的具体方法是什么？

如果你写下代码我会很高兴，因为我在互联网上找不到任何好的解释。

谢谢，

Answer 1

drawImage() 方法可以使用另一个 Canvas 而不是图像绘制到 Canvas 。

您可以创建一个与原始 Canvas 大小相同的“备份” Canvas ，将第一个 Canvas 绘制到那里，然后在需要时将其画回原始 Canvas 。

例如

// Assume we have a main canvas
// canvas = <main canvas>
ctx = canvas.getContext('2d');

..

// create backing canvas
var backCanvas = document.createElement('canvas');
backCanvas.width = canvas.width;
backCanvas.height = canvas.height;
var backCtx = backCanvas.getContext('2d');

// save main canvas contents
backCtx.drawImage(canvas, 0,0);

..

// restore main canvas
ctx.drawImage(backCanvas, 0,0);