html定义两个图层,html5 - canvas元素 - 多个图层

Richard..

36

与此相关:

如果你的画布上有东西,并且你想在它的背面画一些东西 - 你可以通过将context.globalCompositeOperation设置改为'destination-over'来实现它 - 然后当你''时将它返回'source-over'重做.

var context = document.getElementById('cvs').getContext('2d');

// Draw a red square

context.fillStyle = 'red';

context.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 what's already on the canvas

context.globalCompositeOperation = 'destination-over';

// Draw a big yellow rectangle

context.fillStyle = 'yellow';

context.fillRect(0,0,600,250);

// Now return the globalCompositeOperation to source-over and draw a

// blue rectangle

context.globalCompositeOperation = 'source-over';

// Draw a blue rectangle

context.fillStyle = 'blue';

context.fillRect(75,75,100,100);