将许多canvas元素保存为图像

Question

我有3层画布 - 1是矩阵,2和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文件.