您的位置: 首页  >  技术问答  >  在HTML5中堆叠多个画布

在HTML5中堆叠多个画布

分类: 技术问答 • 2022-03-23 18:17:17

在HTML5中堆叠多个画布

问题描述：

我尝试使用彼此堆叠的四个帆布，但除了顶部的内容之外，它们的内容不会显示。我把z-index值放在他们的顺序，我希望他们显示，但只有顶部显示的内容。他们的位置是绝对的，他们的z索引是1,2,3和4.有什么更多的东西，使它们不显示？

I am trying to use four canvases stacked upon eachother but the contents of them won't display besides the contents of the one on the top. I put z-index values to them in order in which I'd like them to display but only the top one is displaying the contents. Their position is absolute and their z indexes are 1, 2, 3 and 4. Is there anything more to it that makes them not display? Or, how many canvases could I stack together in order for all of their contents to display?

我有这个：

<div></div>
<canvas id="bg" width="500" height="500"></canvas> <!--z-index:1 -->
<canvas id="lc" width="500" height="500"></canvas> <!--z-index:2 -->
<canvas id="rc" width="500" height="500"></canvas> <!--z-index:3 -->
<canvas id="ch" width="500" height="500"></canvas> <!--z-index:4 -->
<!-- Script that draws image in each canvas with different x and y values -->

问题是，当我运行该函数时，我正在绘制的图片只出现一次，它只是在一个画布上绘制...例如，我会有这样的脚本：

The problem is that when I run the function, the picture I am drawing only appears once, which means it only drew it on one canvas... For example, I'll have the script something like this:

function drawImgs() {
    var bg = document.getElementById('bg').getContext('2d'),
        lc = document.getElementById('lc').getContext('2d'),
        rc = document.getElementById('rc').getContext('2d'),
        ch = document.getElementById('ch').getContext('2d'),
        img = new Image();
    img.src = "image.png";
    bg.drawImage(img,0,0);
    lc.drawImage(img,64,64);
    rc.drawImage(img,128,128);
    ch.drawImage(img,192,192);
}
drawImgs();

它将只会绘制在Ch画布上的图像，X：192，Y：192。这是为什么？
有一种方法来防止它，或至少确保所有的图像绘制？
是因为我使用的是相同的图像还是画布只是不透明？
您可以浏览多少张帆布限制？

It will only draw the image on the ch canvas, at X:192, Y:192. Why is that? Is there a way to prevent it or at least make sure that all the images are drawn? Is it because I'm using the same image or are the canvasses just not being transparent? Is there a limit to how many canvasses you can look through?

所有信息将不胜感激。非常感谢。

All information will be appreciated. Thanks in advance.

编辑：
然而，如果我只有两个帆布，两个图像都会渲染。为什么是这样？

However, if I only have two canvasses, both images render. Why is this? Couldn't at least two images render if I have four canvasses stacked together?

编辑：
我正在搞砸的四个帆布堆叠在一起。代码，我收到你们（感谢所有的信息，一切都有帮助），我试图把它放入我的实际项目（我测试的代码，它是工作之前，我把它放入我的项目），但一旦我把它进入我的文件，它停止工作了。所以我搞砸了，我注意到，当我没有添加CSS，使页面漂亮，它会工作...我不断搞砸，我发现，背景颜色的画布带走了透明度，它是所以我只是把它放在第一个画布，bg，因为我的页面是黑色的，我想要的画布是白色的...无论如何，感谢大家的帮助，这是真的很感激。 >

I was messing around with the code that I recieved from you guys (thanks for all the information, everything helped) and I tried to put it into my actual project (I tested the code and it was working before I put it into my project) but the once I put it into my files, it stopped working again. So I messed around and I noticed that when I didn't add CSS to make the page pretty that it would work... I kept messing around and I found out that the background-color of the canvas takes away the transparency, it was just that all along... So I just put it on the first canvas, bg, because my page is black and I wanted the canvas to be white... Anyways, thanks for everyone's help, it is really appreciated.

答

第一步是将你的画布包装到一个容器中：

First step is to wrap your canvases into a container:

<div id="stack">
    <canvas id="bg" width="500" height="500"></canvas>
    <canvas id="lc" width="500" height="500"></canvas>
    <canvas id="rc" width="500" height="500"></canvas>
    <canvas id="ch" width="500" height="500"></canvas>
<div>

然后正确应用CSS规则：

then properly apply CSS rules:

#stack {
    position:relative;
    }
#stack > canvas {
    position:absolute;
    left:0;
    top:0;
    }

z-index 在这里不是必要的，因为第一个画布将在底部等。

z-index is not necessary here as the first canvas will be at the bottom etc.

接下来是实现图像加载器处理程序，因为图像加载是异步的。这是为什么你的图像没有显示，因为图像没有完成加载之前调用 drawImage（）（当代码到达第四元素可以根据诸如缓存，系统性能等各种因素来加载图像 - 但是这是在随机结果类别中：

Next is to implement a image loader handler as image loading is asynchronous. This is the reason why your image doesn't show as the image hasn't finished loading before calling drawImage() (at the time the code gets to the "fourth" element the image may be loaded depending on various factors such as cache, system performance etc - but this is in the category "random result":

var bg = document.getElementById('bg').getContext('2d'),
    lc = document.getElementById('lc').getContext('2d'),
    rc = document.getElementById('rc').getContext('2d'),
    ch = document.getElementById('ch').getContext('2d'),
    img = new Image();

img.onload = drawImgs;    /// set handler
img.src = "image.png";    /// set url

function drawImgs() {
    /// 'this' is the loaded image
    bg.drawImage(this, 0,0);
    lc.drawImage(this, 64,64);
    rc.drawImage(this, 128,128);
    ch.drawImage(this, 192,192);

    /// continue rest of code here...
}

如果你把你的脚本放在页面的底部，那就是它。如果在标题中包含您的脚本：

If you put your script at the bottom of your page then that's it. If in the header wrap your script in:

window.onload = function() {

    ... code above here...
}

其他注意事项是，正确。为此，您可以使用图像对象上的 onerror 和 onabort 处理程序：

Other considerations is that your image gets loaded properly. For that you can use the onerror and onabort handlers on the image object:

img.onerror = functionToHandleError;
img.onabort = functionToHandleAbort;

也可以在设置 src 属性。

相关推荐