Question

我在画布中使用了两个图像，现在我想将一个图像放在另一个图像上，即。我想把飞机飞过天空，我该怎么做？

这是我的代码

var canvas = document.getElementById('canvas');
var skyContext = canvas.getContext('2d');
var planeContext = canvas.getContext('2d');
var sky = new Image();
 sky.src = './images/m35.jpeg';
sky.onload = function () {   
    skyContext.drawImage(sky, 0, 0, 250, 250, 50, 50, 250, 250);
}

var plane = new Image();
 plane.src = './images/space-ship.png';
plane.onload = function () {   
    planeContext.drawImage(plane, 0, 0, 70, 80, 50, 250, 70, 80);
}

在上面的代码中，天空正在飞机的前方，使飞机不可见。我也尝试使用相同的上下文，但我无法将图像置于另一个上面。

Answer 1

执行此操作的最有效方法（尤其是看起来您正在创建游戏）是使用两个单独的画布元素，使用CSS定位在彼此之上。

例如：

result =

  3×1 cell array

    'a'
    'b'
    'c'

var canvasMain = document.getElementById('canvasMain');
var canvasBackground = document.getElementById('canvasBackground');

var skyContext = canvasMain.getContext('2d');
var sky = new Image();
 sky.src = 'https://i.stack.imgur.com/xjj19.jpg';
sky.onload = function () {   
    skyContext.drawImage(sky, 0, 0, 250, 250, 50, 50, 250, 250);
}

var planeContext = canvasBackground.getContext('2d');

var plane = new Image();
 plane.src = 'https://i.stack.imgur.com/nHugQ.png';
plane.onload = function () {   
    planeContext.drawImage(plane, 0, 0, 70, 80, 50, 250, 70, 80);
}

.canvas {
    position: absolute;
    top: 0;
    left: 0;
}

Answer 2

您的代码的问题在于图像是在加载后绘制的，我会怀疑因为天空图像比平面图像大，所以加载时需要更长的时间，因此天空图像被绘制成第二个。

在画布上绘制的东西就像在photoshop中的图层一样，最后覆盖的东西覆盖在它之前绘制的东西。

天空和飞机都可以使用相同的画布，你只需要等到两个图像都已加载，然后按照正确的顺序绘制它们，首先绘制天空，然后将平面绘制在顶部。 / p>

如果两个对象位于同一画布上，则可以使用相同的画布上下文，无需创建多个上下文（2只指向同一个位置）。通常当我使用画布时，我只创建一个名为 ctx 的上下文变量，因为它比输入context.etc要快得多。

almcd回答是一种方法，虽然对我来说背景和主要是相反的;我会把天空/星系放在背景上并在主画布上绘制飞机，但还有更好的方法......

如果天空永远不会改变，甚至不需要2幅画布，只有一幅画布背后有背景图片;天空。当需要为平面设置动画时，这种使背景成为静态图像的方法意味着绘制游戏循环的每一帧的次数较少，因此您将获得更好的FPS。

就你的解决方案而言，我认为1个画布用天空作为CSS定位的背景图像，只有在画布上绘制的平面是最好的，这里是代码...

<!doctype HTML>
<html>
    <head>
        <style>
            #canvasContainer {
                background-image: url('https://i.stack.imgur.com/xjj19.jpg');
                background-repeat: no-repeat;
            }
        </style>
    </head>
    <body>
        <div id="canvasContainer">
            <canvas id="canvas" width="1200" height="600"></canvas>
        </div>
        <script>
            var canvas = document.getElementById('canvas');
            var ctx = canvas.getContext('2d');

            // Load the plane and draw it.
            var plane = new Image();
                plane.src = 'https://i.stack.imgur.com/nHugQ.png';
                plane.onload = function () {
                    ctx.drawImage(plane, 100, 100);
                }
        </script>
    </body>
</html>

您可以通过更改发送到绘图图像的100,100个参数来移动平面，因为它们是用于定位平面图像的左侧和顶部。

亲切的问候，道格。

Winwheel.js的创建者是一个功能丰富的JavaScript库，用于在HTML画布上制作旋转奖品轮。见http://dougtesting.net

如何将一个画布上下文放在另一个上面？

2 个答案: