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中文网