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

我有多個由JavaScript創建的畫布元素。我的問題是：「我怎樣才能把多個畫布元素放到一個畫布元素上？」。如何將多個畫布元素放入一個畫布元素中？

來源

2013-04-18 Julian

你可以設置一個jsfiddle –

在這裏你去;

JSfiddle

它會抓住每一個畫布，讓他們PNG的
訪問緩衝區帆布和寫在彼此頂部的PNG的裏面
回寫緩存畫布PNG和發送它到IMG標籤

只要給#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" />'; 
}

來源

2013-04-18 12:51:44

這個工程，但你使用的是jQuery。有沒有可能做到這一點，而不使用jQuery？ – Julian

當然;該問題已更新，現在可以在原生JavaScript上完全工作。 – 2013-04-19 14:55:08

您不需要創建中間圖像。 drawImage方法可以直接將另一個畫布作爲要繪製的圖像。 –

也許這樣的事情，源畫布導出爲圖像，油漆圖像到目標畫布（未經測試）：

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

來源

2013-04-18 12:41:03

畫布的方法的drawImage實際上可以拍攝另一張畫布而不是圖片 - 您無需首先將畫布轉換爲圖像。（見WhatWG's documentation。）

我已經簡化Allendar的的jsfiddle證明：

http://jsfiddle.net/7hEKL/

基本上，所有你需要做的是：

targetCanvas.drawImage(sourceCanvas, 0, 0);

，你應該是好走。

來源

2013-04-19 15:52:19

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

回答

相關問題