image - html5 : copy a canvas to image and back

Question

我在 Canvas 元素上实现了放大和缩小功能。它的工作原理是缩放 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);