在另一个画布上分层画布？答案

【问题标题】：Layering Canvas on another Canvas?在另一个画布上分层画布？
【发布时间】：2015-02-15 21:04:23
【问题描述】：

我目前正在做类似的事情：

创建一个画布并将其附加到分隔符
在该画布上通过 CSS 设置背景图像。
在画布上绘制一个六边形网格
在画布上绘制 PNG。
为这些 PNG 设置动画以显示“运动”。

但是，必须重新绘制包括不动的 PNG 在内的整个画布是一件很痛苦的事情。

我想知道为背景/hexgrid 使用单个画布并在附加的小画布元素上创建 PNG 是否更智能或更好，然后在背景画布的顶部进行 zIndex。然后我可以使动画（PNG 移动）更容易。

但是，在将“新”画布实际放置在背景画布的正确 x/y 坐标上时，我遇到了问题。

this.drawShipImage = function(name, id, x, y){

    var div = document.getElementById("grid");
        // initial, big canvas with background is created elsewhere but has the same width/height than "grid"

    var canvas = document.createElement("canvas");
        canvas.id = name + id;
        canvas.width = 30;
        canvas.height = 30;
        canvas.style.position = "absolute";
        canvas.style.zIndex = 1;    

    var context = canvas.getContext("2d");
        context.scale(0.75, 0.75);
        context.drawImage(ship, 0, 0);

    div.appendChild(canvas);
}

基本上，这个函数有 2 个重要的参数，即 x/y 参数，新画布应该在上下文中绘制到背景画布的宽度/高度。但是我无法得出让图像出现在正确坐标处的方法。

我想它可以工作的唯一方法是添加 canvas.style.margin = x/y-ish 混在一起？

【问题讨论】：

为什么不只使用 2 个画布？一个用于背景，另一个用于 PNG...顺便说一句，您没有使用 top 和 left 属性来定位多个画布？
你能解释一下顶部/左侧属性，如果我只使用 2 个画布，它们将如何帮助我的事业？
当您尝试将每个画布放在背景画布上时，它们不会帮助 2 个画布，而是多个（小）画布。
使用单个画布...使用画布元素的最大优点是避免不必要的 DOM ...无论如何您都必须重新绘制它，它会给您带来更好的性能

标签： javascript css html canvas

【解决方案1】：

使用第二个画布（或只是一个保存背景的 img 元素）可能是一个很好的解决方案，因为您的背景重绘频率低于动画前景。

如果您的设备具有 GPU，则尤其如此，因为与动画前景画布上相对较慢的绘图相比，背景元素将缓存在 GPU 中，并且会非常快速地重绘。

您可以使用 CSS position 属性来堆叠 2 个元素。

将 2 个画布（或画布 + img 元素）包装在一个包装 div 中。
将包装器 div 的 position 属性设置为相对（意味着子级将相对于包装器而不是相对于页面定位）。
将 2 个画布（或画布 + img 元素）position 设置为“绝对”（意味着它们相对于包装器进行定位）。
将子元素的top 和left 属性设置为0，这样它们就会重叠。默认的顶部和左侧值为零，因此将它们分配为零是可选的 - 但将它们显式分配为零更清楚。

HTML

<div id='wrapper'>
    <canvas id="canvasBottom" width=300 height=200></canvas>
    <canvas id="canvasTop" width=300 height=200></canvas>
</div>

CSS

    #wrapper{
        position:relative;
        width:300px;
        height:200px;
    }
    #canvasTop,#canvasBottom{
        position:absolute; top:0px; left:0px;
        border:1px solid green;
        width:300px;
        height:200px;
    }
    #canvasTop{
        border:1px solid red;
    }

【讨论】：

这确实很有帮助。谢谢。

【解决方案2】：

通过 KineticJS 分层画布元素

通过 Eric Rowell 的 KineticJS 对画布元素进行分层非常容易。这是一个非常有用的库，可用于处理 HTML5 画布元素。

该库不再维护，但非常稳定。在这里获取：KineticJS Download

在此处查找参考：KineticJS Reference

如果您在网络上搜索一下示例，您将清楚地了解 KineticJS 中的每个节点都是一个自己的画布元素。这个库依赖于通过组等对画布元素进行分层。

【讨论】：