Javascript 多次复制画布：克隆画布还是复制图像数据？

我的一个界面元素是使用HTML5

元素和相关的JavaScript API呈现的。该元素在整个应用程序的同一屏幕和多个屏幕上的多个位置使用。什么是最有效的方式来显示它的任何地方的要求

我的第一个想法是画一个主画布，然后复制并插入页面中需要的地方。主画布可能类似于：

var master = $('<canvas>').attr({
      width: 100,
      height: 100
    }),
    c = master[0],
    ctx = c.getContext("2d");

    ctx.fillStyle = "#FF0000";
    ctx.fillRect(0, 0, 150, 75);

当页面加载时，我将这样做，在每个容器中插入一个重复的canvas元素：

$(document).ready(function() {
    $('.square-container').each(function() {
        master.clone().appendTo($(this));
    });
}); 

在画布上呈现的内容将比本例中使用的简单正方形更复杂，但最终仍然只是一个静态图像。不过，有可能会有几十张不同的图像，每页都会被克隆几十次

我想到的另一种方法是使用

toDataURL（）

方法创建图像，并将其设置为适当的图像源：

var master = $('<canvas>').attr({
    width: 100,
    height: 100
}),
    c = master[0],
    ctx = c.getContext("2d");

    ctx.fillStyle = "#FF0000";
    ctx.fillRect(0,0,150,75);

var square = c.toDataURL('image/png'); 

对我来说，它看起来就像六个一个，半打另一个。但我想知道一种方法是否被认为比另一种更好？如果在

上呈现的内容更复杂，一种方法会比另一种更有效吗

---

本着同样的精神，当我需要在后续页面上使用该元素时，是最好在每个页面上执行所有javascript（来自上面认为最好的解决方案），还是保存

CANVAS\u element.todata（）的值

在cookie中，然后在后续页面上使用它会更有效率吗？

克隆画布将复制其尺寸和样式，但不会复制其图像数据。您可以通过在上下文中调用

drawImage

来复制图像数据。要将

originalCanvas

的内容绘制到

duplicateCanvas

上，请编写：

duplicateCanvas.getContext('2d').drawImage(originalCanvas, 0, 0);

作为演示，以下代码段生成四个画布：

• 画有小场景的原始画布

• 仅通过调用

  cloneNode

  进行复制

• 通过调用

  cloneNode

  和

  drawImage

• 通过创建新图像并将其源设置为数据URI而创建的副本

功能消息{
document.getElementById（'message'）。innerHTML+=s+'
'；
}
函数timeIt（操作、描述、初始值设定项）{
var totalTime=0，
初始值设定项=初始值设定项| |函数（）{}；
初始值设定项（）；
var startTime=performance.now（）；
动作（）；
var-appeased=performance.now（）-startTime；
消息（“”+
数学四舍五入（经过*1000）+'&mu；s'+描述）；
}
函数makeCanvas（）{
var canvas=document.createElement（'canvas'），
context=canvas.getContext（'2d'）；
画布宽度=100；
画布高度=100；
timeIt（函数（）{
context.fillStyle='#a63d3d'；
context.fillRect（10,10,80,40）；//绘制一个小场景。
context.fillStyle='#3b618c'；
context.beginPath（）；
弧（60,60,25,0,2*Math.PI）；
closePath（）；
context.fill（）；
}，'（百万分之一秒）绘制原始场景'，函数（）{
clearRect（0，0，canvas.width，canvas.height）；
});
返回画布；
}
//copyCanvas返回与给定画布包含相同图像的画布。
功能copyCanvas（原件）{
var拷贝；
timeIt（函数（）{
copy=original.cloneNode（）；//复制画布维度。
copy.getContext（'2d'）.drawImage（原始，0，0）；//复制图像。
}，“使用cloneNode和drawImage复制画布”）；
返回副本；
}
//imageFromStorage从画布提取图像数据，存储图像数据
//在浏览器会话中，然后从会话中检索图像数据并
//从中生成一个新的图像元素。我们测量检索的总时间
//收集数据并制作图像。
函数imageFromStorage（原始）{
var图像，
dataURI=original.toDataURL（）；
timeIt（函数（）{
image=document.createElement（'img'）；
image.src=dataURI；
}，“从数据URI生成图像”）；
返回图像；
}
函数pageLoad（）{
var target=document.getElementById（'canvases'），
containers={}，//我们将把画布放在div中。
名称=['original'、'cloneNode'、'drawImage'、'dataURI']；
对于（变量i=0；i
正文{
字体系列：无衬线；
}
.标题{
字号：18px；
}
.集装箱{
利润率：10px；
显示：内联块；
}
帆布{
边框：1px实心#eee；
}
#信息{
颜色：#666；
字体大小：16px；
线高：28px；
}
#信息，时间{
显示：内联块；
文本对齐：右对齐；
宽度：100px；
}
#留言，号码{
字体大小：粗体；
填充物：1px 3px；
颜色：#222；
背景：efedd4；
}

太棒了！谢谢你的详细回答/解释。。。特别是使用drawImage（）方法的技巧-我很确定我会把头撞到墙上，试图弄清楚“为什么我克隆的
没有显示？”。>如果图像在用户会话之间没有更改，您也可以将其渲染到服务器上的PNG图像。我喜欢这个主意
<img src="" id="square_header" class="square" alt="" />
...
<img src="" id="square_dataTable1" class="square" alt="" />
...
<img src="" id="square_gallery" class="square" alt="" />
....

$(document).ready(function() {
    $('img.square').attr('src', square);
});

duplicateCanvas.getContext('2d').drawImage(originalCanvas, 0, 0);