js怎么设置z index.html,HTML5 Canvas set z-index

j0kEli Stone提出了一个问题：HTML5 Canvas set z-index，或许与您遇到的问题类似。

回答者markE给出了该问题的处理方式：

Yes..kind of yes. You can use compositing to "draw behind" existing pixels.

ctx.globalCompositeOperation='destination-over';

Here's an example and a Demo:

var canvas=document.getElementById("canvas");

var ctx=canvas.getContext("2d");

var cx=100;

drawCircle()

cx+=20;

ctx.globalCompositeOperation='destination-over';

$("#test").click(function(){

drawCircle();

cx+=20;

});

function drawCircle(){

ctx.beginPath();

ctx.arc(cx,150,20,0,Math.PI*2);

ctx.closePath();

ctx.fillStyle=randomColor();

ctx.fill();

}

function randomColor(){

return('#'+Math.floor(Math.random()*16777215).toString(16));

}body{ background-color: ivory; }

canvas{border:1px solid red;}

Draw new circle behind.

希望本文对你有帮助，欢迎支持JavaScript中文网