html5 - canvas元素 - 多個圖層

Question

沒有任何擴展庫，是否可以在同一個canvas元素中有多個圖層？

因此，如果我在頂層執行clearRect，它不會清除底層的一個？

謝謝。

Answer 1

不，但是，您可以將多個<canvas>元素層疊在一起並完成類似的操作。

<div style="position: relative;"> 
<canvas id="layer1" width="100" height="100" 
    style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas> 
<canvas id="layer2" width="100" height="100" 
    style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas> 
</div> 

的​​畫布上畫出你的第一層，和layer2畫布上的第二層。然後當你在頂層上clearRect時，下層畫布上的任何東西都會顯示出來。

Answer 2

與此相關：

如果你有你的畫布上的東西，你想在它的背面畫的東西 - 你可以通過改變context.globalCompositeOperation設置爲「目的地在」做它 - 然後在完成後將其恢復爲「源代碼」。

var co = document.getElementById('cvs').getContext('2d'); 

// Draw a red square 

co.fillStyle = 'red'; 
co.fillRect(50,50,100,100); 



// Change the globalCompositeOperation to destination-over so that anything 
// that is drawn on to the canvas from this point on is drawn at the back 
// of whats already on the canvas 

co.globalCompositeOperation = 'destination-over'; 



// Draw a big yellow rectangle 

co.fillStyle = 'yellow'; 
co.fillRect(0,0,600,250); 


// Now return the globalCompositeOperation to source-over and draw a 
// blue rectangle 

co.globalCompositeOperation = 'source-over'; 

co.fillStyle = 'blue'; 
co.fillRect(75,75,100,100); 

Answer 3

您可以在不附加他們到文檔中創建多個canvas元素。這些將是你層：

然後做你想要與他們在最後無論只呈現他們以正確的順序在上context使用drawImage目的地帆布內容。

Answer 4

我也有這個相同的問題，我雖然多個畫布元素與位置：絕對做的工作，如果你想保存輸出到圖像，這是行不通的。

因此，我繼續做了一個簡單的分層「系統」來編寫代碼，好像每個圖層都有自己的代碼，但它們都被渲染到同一個元素中。

https://github.com/federicojacobi/layeredCanvas

我打算增加額外的功能，但現在它會做。

您可以執行多個功能並調用它們以「僞造」圖層。

Answer 5

您可能還籤http://www.concretejs.com這是一個現代的，輕巧的，HTML5畫布框架，使擊中檢測，分層，和許多其他周邊的東西。你可以做這樣的事情：

var wrapper = new Concrete.Wrapper({ 
    width: 500, 
    height: 300, 
    container: el 
}); 

var layer1 = new Concrete.Layer(); 
var layer2 = new Concrete.Layer(); 

wrapper.add(layer1).add(layer2); 

// draw stuff 
layer1.sceneCanvas.context.fillStyle = 'red'; 
layer1.sceneCanvas.context.fillRect(0, 0, 100, 100); 

// reorder layers 
layer1.moveUp(); 

// destroy a layer 
layer1.destroy(); 

Answer 6

據我所知，將q不希望使用一個庫，但我會提供這種爲他人從谷歌搜索來。 @EricRowell提到了一個好插件，但是，還有另一個插件可以試用，html2canvas。

在我們的案例中，我們使用分層透明PNG與z-index作爲「產品構建器」小部件。 Html2canvas工作出色歸結堆棧沒有推的圖像，也使用的複雜性，解決方法，以及「不響應」畫布本身。我們無法用香草帆布+ JS順利/理智地做到這一點。

首先在絕對div上使用z-index在相對定位的包裝中生成分層內容。然後通過html2canvas管道包裝獲得一個渲染的畫布，你可以保持原樣，或者輸出爲一個圖像，以便客戶端可以保存它。