如何将多个画布元素放入一个canvas元素中？ [英] How can I put multiple canvas elements in to one canvas element?
本文介绍了如何将多个画布元素放入一个canvas元素中？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有多个由JavaScript创建的canvas元素。我的问题是：我怎样才能将多个画布元素放到一个画布元素上？。
I have multiple canvas elements created by JavaScript. My question is: "How can I put multiple canvas elements to one canvas element?".
推荐答案
你走了;
- 它将获取每个画布并使它们成为PNG的
- 访问缓冲区画布并在其中将PNG写在彼此之上
- 将缓冲画布写回PNG并将其发送到IMG标签
#buffer canvas元素 display：none; 并且一切都将不可见（请点击此处; http://jsfiddle.net/Allendar/UqxCY/2/ ）。
Just give the #buffer canvas element display: none; and everything will happen invisible (check here; http://jsfiddle.net/Allendar/UqxCY/2/).
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>
CSS
canvas[id^=c], div[id=output] {
border: 1px solid red;
}
canvas[id=buffer] {
border: 1px dotted green;
}
#output {
padding: 15px;
}
#output img {
border: 1px dotted blue;
}
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" />';
}
这篇关于如何将多个画布元素放入一个canvas元素中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
