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

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

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

然后添加画布，其位置设为绝对，左/上为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);

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

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

演示：

＆＃13;

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

＆＃13;

#container {position:relative}

＆＃13;

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

＆＃13;

Answer 2

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

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

var gameObjects=[];

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

... and so on ...

然后，对于每个游戏框架，清除画布并使用definitions-array在新位置绘制游戏对象。

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

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

2 个答案:

演示：