任何方式克隆HTML5的canvas元素与其内容？
有没有办法用所有绘制的内容创build一个canvas元素的深层副本？
实际上复制canvas数据的正确方法是将旧canvas传递给新的空白canvas。 试试这个function。
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是为了像素数据访问，而不是复制canvas。 使用它进行复制在浏览器上非常缓慢和困难。 应该避免。
你可以打电话
context.getImageData(0, 0, context.canvas.width, context.canvas.height);
这将返回一个ImageData对象。 这有一个名为CanvasPixelArraytypes数据的属性，其中包含所有像素的rgb和透明度值。 这些值不是对canvas的引用，因此可以在不影响canvas的情况下进行更改。
如果还需要该元素的副本，则可以创build一个新的canvas元素，然后将所有属性复制到新的canvas元素。 之后，你可以使用
context.putImageData(imageData, 0, 0);
方法将ImageData对象绘制到新的canvas元素上。
从HTML Canvas获取更多详细信息getPixel？ 在操纵像素。
您可能也会发现这个mozilla文章也很有用https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes
