Javascript 如何将多个画布元素放入一个画布元素中？
我有多个由JavaScript创建的画布元素。我的问题是：“如何将多个画布元素放在一个画布元素上？”可能类似于这样，将源画布导出到图像，将该图像绘制到目标画布（未测试）： 给你Javascript 如何将多个画布元素放入一个画布元素中？,javascript,html,canvas,Javascript,Html,Canvas,我有多个由JavaScript创建的画布元素。我的问题是：“如何将多个画布元素放在一个画布元素上？”可能类似于这样，将源画布导出到图像，将该图像绘制到目标画布（未测试）： 给你 它将抓取每个画布，使它们成为PNG的 访问缓冲区画布，并将PNG写在画布内的每个画布上 将缓冲区画布写回PNG并将其发送到IMG标记 只需给#buffer画布元素显示：无和一切都将发生隐形（选中此处；） HTML <body onload="generatePNG()"> <canvas
- 它将抓取每个画布，使它们成为PNG的
- 访问缓冲区画布，并将PNG写在画布内的每个画布上
- 将缓冲区画布写回PNG并将其发送到IMG标记
#buffer显示：无和一切都将发生隐形（选中此处；）
HTML
<body onload="generatePNG()">
<canvas id="c1"></canvas>
<canvas id="c2"></canvas>
<canvas id="c3"></canvas>
<canvas id="buffer"></canvas>
<div id="output">Empty</div>
</body>
JavaScript
function generatePNG() {
var b_canvas1 = document.getElementById("c1");
var b_context1 = b_canvas1.getContext("2d");
b_context1.fillRect(10, 50, 50, 50);
var b_canvas2 = document.getElementById("c2");
var b_context2 = b_canvas2.getContext("2d");
b_context2.fillRect(80, 50, 50, 50);
var b_canvas3 = document.getElementById("c3");
var b_context3 = b_canvas3.getContext("2d");
b_context3.fillRect(150, 50, 50, 50);
var img1 = new Image();
img1.src = b_canvas1.toDataURL("image/png");
var img2 = new Image();
img2.src = b_canvas2.toDataURL("image/png");
var img3 = new Image();
img3.src = b_canvas3.toDataURL("image/png");
var buffer = document.getElementById("buffer");
var buffer_context = buffer.getContext("2d");
buffer_context.drawImage(img1, 0, 0);
buffer_context.drawImage(img2, 0, 0);
buffer_context.drawImage(img3, 0, 0);
var buffer_img = new Image();
buffer_img.src = buffer.toDataURL("image/png");
var output = document.getElementById('output');
output.innerHTML = '<img src="' + buffer_img.src + '" alt="Canvas Image" />';
}
函数generatePNG（）{
var b_canvas1=document.getElementById（“c1”）；
var b_context1=b_canvas1.getContext（“2d”）；
b_context1.fillRect（10,50,50,50）；
var b_canvas2=document.getElementById（“c2”）；
var b_context2=b_canvas2.getContext（“2d”）；
b_context2.fillRect（80,50,50,50）；
var b_canvas3=document.getElementById（“c3”）；
var b_context3=b_canvas3.getContext（“2d”）；
b_context3.fillRect（150,50,50,50）；
var img1=新图像（）；
img1.src=b_canvas1.toDataURL（“image/png”）；
var img2=新图像（）；
img2.src=b_canvas2.toDataURL（“image/png”）；
var img3=新图像（）；
img3.src=b_canvas3.toDataURL（“image/png”）；
var buffer=document.getElementById（“buffer”）；
var buffer_context=buffer.getContext（“2d”）；
buffer_context.drawImage（img1,0,0）；
buffer_context.drawImage（img2，0，0）；
buffer_context.drawImage（img3,0,0）；
var buffer_img=新图像（）；
buffer_img.src=buffer.toDataURL（“image/png”）；
var output=document.getElementById（'output'）；
output.innerHTML=''；
}
画布的drawImage方法实际上可以使用另一个画布而不是图像-您不需要先将画布转换为图像。（见附件。）
我简化了Allendar的JSFIDLE来演示：
基本上，您需要做的就是：
targetCanvas.drawImage(sourceCanvas, 0, 0);
您应该准备好了。您可以设置一个jsfiddle吗这是可行的，但您使用的是jquery。是否有可能不使用jquery就可以实现这一点；问题已经更新，现在可以完全在本机JavaScript上工作了。您不需要创建中间图像。drawImage方法可以直接使用另一个画布作为要绘制的图像。@ChrisW。认识克里斯真好。在过去，我从未对canvas进行过彻底的研究，但这似乎是缩短代码并使其更轻松的一个很好的跳过步骤：）@Allendar，奇怪的是，您的原生JavaScript代码可以在JSFiddle中工作，但不能在真正的html文档中工作。你在一个真正的html文档中测试过它吗？
function generatePNG() {
var b_canvas1 = document.getElementById("c1");
var b_context1 = b_canvas1.getContext("2d");
b_context1.fillRect(10, 50, 50, 50);
var b_canvas2 = document.getElementById("c2");
var b_context2 = b_canvas2.getContext("2d");
b_context2.fillRect(80, 50, 50, 50);
var b_canvas3 = document.getElementById("c3");
var b_context3 = b_canvas3.getContext("2d");
b_context3.fillRect(150, 50, 50, 50);
var img1 = new Image();
img1.src = b_canvas1.toDataURL("image/png");
var img2 = new Image();
img2.src = b_canvas2.toDataURL("image/png");
var img3 = new Image();
img3.src = b_canvas3.toDataURL("image/png");
var buffer = document.getElementById("buffer");
var buffer_context = buffer.getContext("2d");
buffer_context.drawImage(img1, 0, 0);
buffer_context.drawImage(img2, 0, 0);
buffer_context.drawImage(img3, 0, 0);
var buffer_img = new Image();
buffer_img.src = buffer.toDataURL("image/png");
var output = document.getElementById('output');
output.innerHTML = '<img src="' + buffer_img.src + '" alt="Canvas Image" />';
}
targetCanvas.drawImage(sourceCanvas, 0, 0);