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管道包装获得一个渲染的画布，你可以保持原样，或者输出为一个图像，以便客户端可以保存它。