HTML5画布更改图像Z索引

Question

I am creating an HTML5 Canvas game and I came to a problem, is there a way to change the image layering order? Something like Z-Index in normal HTML? I can't really put it into words so I'll upload an image of what's happening right now.

What I want is the grey part to cover all the other images inside the canvas. The scope already has transparency so it should render whatever is behind it but I don't want to render what is on the grey part. Is there a way to do that?

Thanks in advance

Answer 1

You can manage this using Compositing in HTML5 Canvas drawing API

http://www.w3.org/html/wg/drafts/2dcontext/html5_canvas/#compositing

With examples

http://www.tutorialspoint.com/html5/canvas_composition.htm

Answer 2

One way to make multiple layers is by using multiple canvases and stacking them over each other with CSS positioning.

When you want to use only one canvas, you can start your drawing loop with erasing your whole canvas and then redrawing the whole scene from back to front. When you use requestAnimationFrame , you shouldn't even have any flickering, because the rendering engine of the web browser will take care of that.

Another option could be to use globalCompositeOperation . It allows you to mask what you draw with what is already drawn. When you use the mode destination-over , you will only draw on pixels where nothing else is drawn.

Answer 3

You can append the canvas to a element instead of to the document body, like this:
Let your div have an id, like this:

<div id="myDiv1"></div>  

Then have another div with a different id:

<div id="myDiv2"></div>  

These two should be peers, meaning one is not nested inside the other.
Now you can position these any way you like, and give them z-index properties of your choice, either directly on the div elements or externally and referenced in.
Now you have, say:

<div id="myDiv" style="z-index:1"></div>  
<div id="myDiv2" style="z-index:2"></div>  

If these are positioned on top of each other, then myDiv2 will appear on top of myDiv1. Now finally, in Javascript you can append a canvas element to either div (or a different one in each), like this:

var c = document.createElement("canvas");  
var myCanvas1 = document.getElementById('myDiv1');  
myCanvas1.appendChild(c);  
var d = document.createElement("canvas");  
var myCanvas2 = document.getElementById('myDiv2');  
myCanvas2.appendChild(d);  

and then continue with the contents of the canvases. Finally your can control the stacking through Javascript by changing the z-indexes of the corresponding container divs. For example, given the setup above, you can do the following Javascript statement, in some Javascript function of your choice, to put myCanvas1 on top of myCanvas2:

document.getElementById('myCanvas1').style.zIndex = 3;