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

Question

我目前正在开发一款游戏来自学 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>

我有这个。

现在我正在尝试这个：

this.canvasElement = document.createElement('canvas')

Answer 1

一种更传统的方法是让一个 canvas 显示多个（分层）对象。

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

var gameObjects=[];

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

... and so on ...

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

// 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);
}

分层

要进行分层，您可以为每个游戏对象添加一个 z-index 属性。它不像传统的 html/css z-index 那样是 z-index。相反，它只是让您将游戏对象排序为您需要的任何顺序（层）。

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); }
}

Answer 2

将它们添加到位置设置为相对的容器元素（最好创建一个规则，而不是像本例中那样的内联样式）：

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

然后添加 canvases 并将它们的位置设置为绝对位置并将 left/top 设置为 0:

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);

第一个 canvas 添加的将在底部，最后一个在顶部。

你可以使用 z-indexes 但最好只按你想要的顺序创建和添加 canvases ，首先知道底部等（imo） .

演示：

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

var ctx = canvas.getContext("2d");
ctx.font = "80px sans-serif";
ctx.fillText("BOTTOM", 10, 120);

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

// SECOOND CANVAS

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

var ctx2 = canvas2.getContext("2d");
ctx2.font = "80px sans-serif";
ctx2.fillStyle = "blue";
ctx2.fillText("TOP", 16, 120);

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

#container {position:relative}

<div id="container"></div>

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

Layering dynamically created Canvases in Javascript

html

javascript

canvas

html5-canvas

演示：