分层在Javascript中动态创建画布

Layering dynamically created Canvases in Javascript

本文关键字：创建 动态 Javascript 分层      更新时间：2023-09-26

我目前正在开发一款游戏，自学HTML5和Javascript等。

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

然而，我不知道如何像以前那样正确地将它们分层。现在我已经把不同的画布叠在一起了（我的背景位于玩家图标上方，要避开的对象下方）。

我该怎么做？我知道它与z索引（可能是innerHTML）有关，但我对HTMLJavascript非常熟悉。

谢谢！

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

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

<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索引，但最好只是按照您想要的顺序创建和添加画布，知道第一个是底部等。（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>

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

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

var gameObjects=[];
var gameObjects.push({
    type: 'rect',
    x:50, y:50,
    width:100, height:75,
    fill: 'red'
});
... and so on ...

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

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

分层

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

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); }
}
相关文章：