从多个画布制作图像

Question

如何从多个画布制作一个 IMG？我想为我的网络应用程序制作一个按钮，该按钮将从更多覆盖的画布中制作一个图像。我找到了这个选项，但我不知道如何使它与多个画布一起工作到单个图像。 谢谢

function print() {
var canvas = document.getElementById("mycanvas");
var img    = canvas.toDataURL("image/png");
document.write('<img src="'+img+'"/>');
}

Answer 1

只需将画布绘制到主画布中：

假设他们有 id：

var canvasMain = document.getElementById('canvasMain'); //destination canvas
var ctx = canvasMain.getContext('2d');

var canvas1 = document.getElementById('canvas1');       // layer 1
var canvas2 = document.getElementById('canvas2');       // layer 2
var canvas3 = document.getElementById('canvas3');       // layer 3

ctx.drawImage(canvas1, 0, 0);    // draw canvas 1 into main canvas
ctx.drawImage(canvas2, 0, 0);    // draw canvas 2 into main canvas
ctx.drawImage(canvas3, 0, 0);    // draw canvas 3 into main canvas

var dataUri = canvasMain.toDataURL(); //extract main canvas as url

希望这会有所帮助！