html5 - canvas元素 - 多个图层

Question

html5 - canvas元素 - 多个图层

没有任何扩展库，是否可以在同一个canvas元素中有多个图层？

所以，如果我在顶层执行clearRect，它将不会删除底层？

谢谢。

Answer 1

不，但是，您可以将多个<canvas>元素叠加在一起并完成类似的操作。<div&nbsp;style="position:&nbsp;relative;"> &nbsp;<canvas&nbsp;id="layer1"&nbsp;width="100"&nbsp;height="100"&nbsp; &nbsp;&nbsp;&nbsp;style="position:&nbsp;absolute;&nbsp;left:&nbsp;0;&nbsp;top:&nbsp;0;&nbsp;z-index:&nbsp;0;"></canvas> &nbsp;<canvas&nbsp;id="layer2"&nbsp;width="100"&nbsp;height="100"&nbsp; &nbsp;&nbsp;&nbsp;style="position:&nbsp;absolute;&nbsp;left:&nbsp;0;&nbsp;top:&nbsp;0;&nbsp;z-index:&nbsp;1;"></canvas></div>在layer1画布上绘制第一个图层，在画布上绘制第二个图层layer2。然后，当您clearRect在顶层时，下部画布上的任何内容都将显示出来。

Answer 2

与此相关：如果你的画布上有东西，并且你想在它的背面画一些东西 - 你可以通过将context.globalCompositeOperation设置改为'destination-over'来实现它 - 然后当你''时将它返回'source-over'重做。var co = document.getElementById('cvs').getContext('2d');// Draw a red squareco.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 canvasco.globalCompositeOperation = 'destination-over';// Draw a big yellow rectangleco.fillStyle = 'yellow';co.fillRect(0,0,600,250);// Now return the globalCompositeOperation to source-over and draw a// blue rectangleco.globalCompositeOperation = 'source-over';co.fillStyle = 'blue';co.fillRect(75,75,100,100);