html5 - canvas元素 - 多个图层

Question

html5 - canvas元素 - 多个图层没有任何扩展库，是否可以在同一个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>

在layer1画布上绘制第一个图层，在画布上绘制第二个图层layer2。然后，当您clearRect在顶层时，下部画布上的任何内容都将显示出来。

Answer 2

与此相关：

如果你的画布上有东西，并且你想在它的背面画一些东西 - 你可以通过将context.globalCompositeOperation设置改为'destination-over'来实现它 - 然后当你''时将它返回'source-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);