html5 多个 canvas 重叠,html5 - canvas元素 - 多个图层

与此相关：

如果你的画布上有东西，并且你想在它的背面画一些东西 - 你可以通过将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);