Javascript 是否可以在一个值中保存3个或多个canvas.toDataURL（）？

我想每2分钟保存一次画布

document.getElementById('canvasUrl').value = canvas.toDataURL();

我尝试：

document.getElementById('canvasUrl').value += canvas.toDataURL();
//or
var canvasValue += canvas.toDataURL();
document.getElementById('canvasUrl').value = canvasValue;

---

两个都不行！为什么？

可以，但在使用

dataURL

之前，需要先组合图像数据。请注意，这是非常详细的，我想你会希望在一个数组或沿这些线的东西多画布

其工作原理是从前3张画布中提取数据，然后将其绘制到第4张画布，第4张画布的数据URL是使用的，它将前3张画布中的数据合并在一起

const canvas1=document.querySelector（'first'）；
const ctx1=canvas1.getContext（'2d'）；
const canvas2=document.querySelector（'second'）；
const ctx2=canvas2.getContext（'2d'）；
const canvas3=document.querySelector（'third'）；
const ctx3=canvas3.getContext（'2d'）；
ctx1.fillStyle='红色'；
ctx1.fillRect（0，0，100，100）；
ctx2.fillStyle='蓝色'；
ctx2.fillRect（100100100100）；
ctx3.fillStyle='绿色'；
ctx3.fillRect（10,10,100,10）；
const saveCanvas=document.querySelector（'#saved'）；
const ctxSave=saveCanvas.getContext（'2d'）；
//在我们要保存的画布上绘制其他画布。
ctxSave.drawImage（canvas1,0,0）；
ctxSave.drawImage（canvas2，0，0）；
ctxSave.drawImage（canvas3,0,0）；
document.getElementById（'canvasUrl'）。value=saveCanvas.toDataURL（）
画布{
边框：1px纯黑；
}

保存的画布数据