在 Javascript 中对动态创建的画布进行分层答案

【问题标题】：Layering dynamically created Canvases in Javascript在 Javascript 中对动态创建的画布进行分层
【发布时间】：2015-06-01 03:56:05
【问题描述】：

我目前正在开发一款自学 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')

【问题讨论】：

没有任何代码或不知道你所说的“层”是什么意思，我们肯定也不知道？

标签： javascript html canvas html5-canvas

【解决方案1】：

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

<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-indexes，但最好按照您想要的顺序创建和添加画布，知道首先是底部等 (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}

&lt;div id="container"&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

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

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

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

分层

要进行分层，您可以为每个游戏对象添加一个 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); }
}

【讨论】：