将许多canvas元素保存为图像

Question

我有3层帆布 - 1是矩阵，2＆amp; 3是图形，如何在一个图像中保存它们？

<div style="position: relative;">
 <canvas id="matix" width="100" height="100" 
   style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
 <canvas id="layer1" width="100" height="100" 
   style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
 <canvas id="layer2" width="100" height="100" 
   style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
</div>

Answer 1

您可以使用ctx.drawImage(other_canvas,0,0)

将一个画布绘制到另一个画布中

如果按正确的顺序执行此操作，您将在其中一个中正确分层所有画布内容。

如果您想保存图像，可以调用canvas.toDataURL()将内容作为base64编码的PNG文件。