有没有办法克隆包含内容的HTML5画布元素？
有没有办法克隆包含内容的HTML5画布元素？
提问于 2010-07-23 21:31:42
有没有办法创建一个包含所有绘制内容的画布元素的深层副本？
回答 2
Stack Overflow用户
回答已采纳
发布于 2011-11-29 12:52:48
实际上，复制画布数据的正确方法是将旧画布传递给新的空白画布。尝试此函数。
function cloneCanvas(oldCanvas) {
//create a new canvas
var newCanvas = document.createElement('canvas');
var context = newCanvas.getContext('2d');
//set dimensions
newCanvas.width = oldCanvas.width;
newCanvas.height = oldCanvas.height;
//apply the old canvas to the new one
context.drawImage(oldCanvas, 0, 0);
//return the new canvas
return newCanvas;
}使用getImageData是为了访问像素数据，而不是复制画布。在浏览器上用它复制是非常慢和困难的。这是应该避免的。
Stack Overflow用户
发布于 2010-07-24 00:16:37
你可以打电话给
context.getImageData(0, 0, context.canvas.width, context.canvas.height);它将返回一个ImageData对象。它有一个名为CanvasPixelArray类型的属性，它包含所有像素的rgb和透明度值。这些值不是对画布的引用，因此可以在不影响画布的情况下进行更改。
如果还需要元素的副本，可以创建一个新的canvas元素，然后将所有属性复制到新的canvas元素中。之后，您可以使用
context.putImageData(imageData, 0, 0);方法将ImageData对象绘制到新的画布元素上。
有关处理像素的更多详细信息，请参阅此答案getPixel from HTML Canvas?。
您可能会发现这篇mozilla文章也很有用，https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/3318565
复制相关文章
相似问题
腾讯云开发者
