在HTML5中堆叠多个画布 [英] Stacking multiple canvases in 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?

编辑：
但是，如果我只是有两个画布，两个图像渲染。为什么是这样？如果我将四个画布堆叠在一起，至少可以渲染两个图像？

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.

推荐答案

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

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 属性之前定义了这些属性。

also these defined before setting the src property.

这篇关于在HTML5中堆叠多个画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！