如何將多個畫布元素放入一個畫布元素中？

Question

我有多個JavaScript創建的畫布元素。 我的問題是：“如何將多個畫布元素放在一個畫布元素上？”。

Answer 1

干得好;

它將抓取每個畫布並將它們設為PNG
訪問緩沖畫布，並將PNG相互寫在其中
將緩沖畫布寫回PNG並將其發送到IMG標簽

只需display: none; #buffer畫布元素即可display: none; 一切都會變得不可見（請參閱此處； 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" />';
}

Answer 2

畫布的drawImage方法實際上可以使用其他畫布而不是圖像-您無需先將畫布轉換為圖像。 （請參閱WhatWG的文檔。）

我已經簡化了Allendar的JSFiddle，以演示：

http://jsfiddle.net/7hEKL/

基本上，您需要做的是：

targetCanvas.drawImage(sourceCanvas, 0, 0);

而且你應該很好走。

Answer 3

也許是這樣的，將源畫布導出到圖像，將該圖像繪制到目標畫布（未測試）：

function drawCanvasOnOtherCanvas(src, target) {
  var img = new Image();
  img.onload = function() {
    target.drawImage(img, 0, 0);
  };
  img.src = src.toDataURL('image/png');
}

如何將多個畫布元素放入一個畫布元素中？

問題描述

3 個解決方案

解決方案1
3 已采納

解決方案2
2 2013-04-19 15:52:19

解決方案3
0 2013-04-18 12:41:03

如何將多個畫布元素放入一個畫布元素中？

問題描述

3 個解決方案

解決方案1 3 已采納

解決方案2 2 2013-04-19 15:52:19

解決方案3 0 2013-04-18 12:41:03

解決方案1
3 已采納

解決方案2
2 2013-04-19 15:52:19

解決方案3
0 2013-04-18 12:41:03