Question

我目前正在做的事情如下：

创建一个画布并将其附加到分隔符
在画布上通过CSS设置背景图片。
在画布上绘制一个hexgrid
在画布上绘制PNG。
为这些PNG设置动画以显示“移动”。

但是，必须重绘整个画布，包括不移动的PNG，这是一种痛苦。

我想知道为Background / 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);
}

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

我认为唯一可行的方法是添加 canvas.style.margin = x / y-ish 进入混合？

Answer 1

使用第二个画布（或仅包含背景的img元素）可能是一个很好的解决方案，因为您的背景将比动画前景更少地重绘。

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

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

将2幅画布（或画布+ img元素）包裹在包装div中。
将包装器div的position属性设置为relative（意味着子项将相对于包装器而不是相对于页面定位）。
将2幅画布（或画布+ img元素）position设置为“绝对”（意味着它们相对于包装器定位）。
设置top＆amp;子元素的left属性为0，因此它们将重叠。默认顶部＆amp;左值为零，因此将它们分配为零是可选的 - 但明确地将它们分配给零更清楚。

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

Answer 2

通过 KineticJS

分层画布元素

通过Eric Rowell的KineticJS分层画布元素非常容易。使用HTML5 canvas元素是一个非常有用的库。

lib不再维护，但它非常稳定。在此处获取：KineticJS Download

在此处查找参考：KineticJS Reference

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

在另一幅画布上分层画布？

2 个答案:

通过 KineticJS