有没有办法创建一个包含所有绘制内容的画布元素的深层副本?
发布于 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是为了访问像素数据,而不是复制画布。在浏览器上用它复制是非常慢和困难的。这是应该避免的。
发布于 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
https://stackoverflow.com/questions/3318565
复制相似问题