html5 – canvas元素 – 多个图层
没有任何扩展库，是否有可能在同一个canvas元素中有多个图层？
所以如果我在顶层做一个clearRect，它不会抹掉底层的？
谢谢。
不，但是，您可以将多个<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>
在第一层canvas上绘制第一层，在第二层canvas上绘制第二层。 然后，当您clearRect上的图层时，下层canvas上的任何内容都会显示出来。
与此相关的是：
如果你的canvas上有东西，而你想在canvas背面画东西 – 你可以通过改变context.globalCompositeOperation设置为'destination-over'来完成，然后在'重做。
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);
您可以创build多个canvas元素而不将它们附加到文档中。 这些将是你的层次 ：
然后做任何你想要的东西，最后只是在目标canvas上使用drawImage在context以适当的顺序呈现其内容。
我也有这个相同的问题，我同时位置：多个canvas元素绝对做的工作，如果你想保存输出到图像，这是行不通的。
所以我继续做了一个简单的分层“系统”来编写代码，就好像每个图层都有自己的代码一样，但是它们都被渲染成了相同的元素。
https://github.com/federicojacobi/layeredCanvas
我打算增加额外的function，但现在它会做。
您可以执行多个function并调用它们以“伪造”图层。
你也可以检查http://www.concretejs.com ，这是一个现代的，轻量级的Html5canvas框架，可以实现命中检测，分层和许多其他外围设备。 你可以做这样的事情：
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();
我明白Q不想使用图书馆，但是我会为来自Googlesearch的其他人提供此function。 @EricRowell提到了一个好的插件，但是，还有另一个插件可以尝试， html2canvas 。
在我们的例子中，我们使用带z-index分层透明PNG作为“产品构build器”小部件。 Html2canvas工作出色地煮沸堆栈而不推动图像，也没有使用复杂性，解决方法，和“非响应”canvas本身。 香草canvas+ JS，我们无法顺利/理智地做到这一点。
首先在绝对div上使用z-index来生成相对定位包装中的分层内容。 然后通过html2canvaspipe道包装获得一个渲染的canvas，你可以保持原样，或输出为一个图像，以便客户端可以保存它。
