javascript - 从多个 Canvas 制作图像

Question

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

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

Answer 1

只需将 Canvas 绘制到您的主 Canvas 中:

假设他们有 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

希望这对您有所帮助!