在Javascript中分层动态创建的画布

我目前正在制作一个游戏，自学HTML5和Javascript等

最初我只是在HTML主体中有静态画布，但传递给我的对象会让我感到痛苦，等等。基本上，让每个对象根据需要创建自己的对象会更容易

然而，我不知道如何像以前一样正确地分层。现在我已经把不同的画布叠在一起了（我的背景位于播放器图标的上方和对象的下方）

我该怎么做？我知道它与z-index（可能是innerHTML）相关，但我非常熟悉HTML Javascript

谢谢

    <canvas id="pointsCanvas"
style="z-index: 40;
position:absolute;
left:0px;
top:0px;
">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>

<canvas id="menuCanvas"
style="z-index: 50;
position:absolute;
left:0px;
top:0px;
">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>

---

更传统的方法是让一个画布显示多个（分层）对象

为此，可以创建包含每个对象定义的数组：

var gameObjects=[];

var gameObjects.push({
    type: 'rect',
    x:50, y:50,
    width:100, height:75,
    fill: 'red'
});

... and so on ...

然后，对于每个游戏帧，清除画布并使用定义数组在其新位置绘制游戏对象

// move the rect 5 pixels rightward
gameObjects[0].x += 5;

context.clearRect(0,0,canvas.width,canvas.height);

for(var i=0;i<gameObjects.length;i++){
    var obj=gameObjects[i];
    if(i.type='rect'){ drawRect(obj); }
}

function drawRect(r){
    context.fillStyle=r.fill;
    context.fillRect(r.x,r.y,r.width,r.height);
}

//向右移动矩形5像素
游戏对象[0].x+=5；
clearRect（0,0，canvas.width，canvas.height）；
对于（var i=0；i将它们添加到容器元素中，其位置设置为相对（最好创建一个规则，而不是像本例中那样的内联样式）：

添加的第一块画布将位于底部，最后一块位于顶部

你可以使用z索引，但最好只是按照你想要的顺序创建和添加画布，知道第一个是底部等等（依我看）

演示：

var canvas=document.createElement（“canvas”）；
画布宽度=500；
画布高度=400；
canvas.style.cssText=“位置：绝对；左侧：0；顶部：0”；
var ctx=canvas.getContext（“2d”）；
ctx.font=“80px无衬线”；
ctx.fillText（“底部”，10，120）；
//添加到元素
document.getElementById（“容器”）.appendChild（画布）；
//封闭帆布
var canvas2=document.createElement（“canvas”）；
画布2.0宽=500；
画布2.高度=400；
canvas2.style.cssText=“位置：绝对；左侧：0；顶部：0”；
var ctx2=canvas2.getContext（“2d”）；
ctx2.font=“80px无衬线”；
ctx2.fillStyle=“蓝色”；
ctx2.fillText（“顶部”，16，120）；
//添加到元素
document.getElementById（“容器”）.appendChild（canvas2）；
#容器{位置：相对}
如果没有任何代码或不知道“层”的确切含义，我们当然也不知道？
// move the rect 5 pixels rightward
gameObjects[0].x += 5;

context.clearRect(0,0,canvas.width,canvas.height);

for(var i=0;i<gameObjects.length;i++){
    var obj=gameObjects[i];
    if(i.type='rect'){ drawRect(obj); }
}

function drawRect(r){
    context.fillStyle=r.fill;
    context.fillRect(r.x,r.y,r.width,r.height);
}

var gameObjects.push({
    type: 'rect',
    x:50, y:50,
    width:100, height:75,
    fill: 'red',
    zIndex=3
});

// sort the array by zIndex to apply layering
gameObjects.sort(function(a,b){return a.zIndex - b.zIndex});

// and now draw the "relayered" objects in the array
for(var i=0;i<gameObjects.length;i++){
    var obj=gameObjects[i];
    if(i.type='rect'){ drawRect(obj); }
}

<div id="container" style="position:relative"></div>

var canvas = document.createElement("canvas");
canvas.width = 500;
canvas.height = 400;
canvas.style.cssText = "position:absolute;left:0;top:0";

// add to container
document.getElementById("container").appendChild(canvas);