我在canvas元素上实现了放大和缩小功能.
它通过缩放画布,翻译它,然后再次重绘整个场景.
问题是需要很多时间来重绘一切,因为我在画布上有很多东西.
它通过缩放画布,翻译它,然后再次重绘整个场景.
问题是需要很多时间来重绘一切,因为我在画布上有很多东西.
我需要一种将画布复制到图像对象的方法,而不是将图像复制回画布,而不会损失质量.将canvas复制到javascript变量的具体方法是什么？稍后再将此变量复制回画布？
如果你写下代码,我会很高兴,因为在互联网上找不到任何好的解释.
谢谢,
解决方法
drawImage()方法可以使用另一个画布而不是图像绘制到画布上.
您可以创建一个与原始尺寸相同的“备份”画布,将第一个画面绘制到那里,然后在需要时将其绘制回原稿.
例如
// 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);
..
// restore main canvas
ctx.drawImage(backCanvas,0);