如何在 javascript 中的 1 canvas 上同时播放多个动画

Question

我正在使用 sprite 为 3 个不同的角色制作动画。但我遇到的问题是我只能看到三个动画中的一个（我猜加载速度比其他动画快）。有没有办法同时为它们设置动画以便可以看到它们？

js:

var monsterImg = new Image();
var monsterImg1 = new Image();
var monsterImg2 = new Image();

var canvas = document.getElementById("board");

monsterImg1.src = "minotaur.png";
monsterImg.src = "manyeyedball.png";
monsterImg2.src = "nomad.png";

var monster = sprite({
    context: canvas.getContext("2d"),
    width: 936,
    height: 222,
    image: monsterImg,
    x: 0,
    y: 144,
    amp: 10
});

var monster1 = sprite({
    context: canvas.getContext("2d"),
    width: 540,
    height: 144,
    image: monsterImg1,
    x: 0,
    y: 0,
    amp: 10
});

var monster2 = sprite({
    context: canvas.getContext("2d"),
    width: 828,
    height: 114,
    image: monsterImg2,
    x: 0,
    y: 366,
    amp: 15
});

function sprite (options) {

    var that = {},
        frameIndex = 0,
        tickCount = 0,
        ticksPerFrame = options.ticksPerFrame || 4,
        numberOfFrames = options.numberOfFrames || 6;

    that.context = options.context;
    that.width = options.width;
    that.height = options.height;
    that.image = options.image;
    that.x = options.x;
    that.y = options.y;

    that.loop = options.loop;

    that.update = function () {

        tickCount += 1;

        //console.log("tick count: " + tickCount);

        if (tickCount > ticksPerFrame) {

            tickCount = 0;

            //console.log("frame index: " + frameIndex + ", number of frames: " + numberOfFrames)

            // If the current frame index is in range
            if (frameIndex < numberOfFrames - 1) {  
                // Go to the next frame
                frameIndex += 1;
                that.x += options.amp;
            }
            else {
                frameIndex = 0;
            }
            //console.log("frame index: " + frameIndex);
        }
    };

    that.render = function () {

        // Clear the canvas
        that.context.clearRect(0, 0, canvas.width, canvas.height);

        // Draw the animation
        that.context.drawImage( that.image, frameIndex * that.width / numberOfFrames, 0, that.width / numberOfFrames, that.height, that.x, that.y, that.width / numberOfFrames, that.height);
    };

    return that;
}

function eyedBallLoop() {

    window.requestAnimationFrame(eyedBallLoop);

    monster.update();
    monster.render();
}

function minotaurLoop() {

    window.requestAnimationFrame(minotaurLoop);

    monster1.update();
    monster1.render();
}

function nomadLoop() {

    window.requestAnimationFrame(nomadLoop);

    monster2.update();
    monster2.render();
}

monsterImg.addEventListener("load", eyedBallLoop, false);
monsterImg1.addEventListener("load", minotaurLoop, false);
monsterImg2.addEventListener("load", nomadLoop, false);

html:

<!DOCTYPE HTML>
<html>
    <body>
        <canvas id="board" width="950" height="950"></canvas>

        <script type="text/javascript" src="test.js"></script>
    </body>

图片：

第一名：https://imgur.com/o9hC5d8

第二名：https://imgur.com/I4SY0c9

第三名：https://imgur.com/3nM3lmT

Answer 1

问题是您在 sprite 函数中每次渲染前清除了 canvas。
而是渲染所有三个图像，并在每轮渲染之前清除 canvas。
另一件需要考虑的事情是每次获得动画帧时都渲染它们。只需遍历 "monsters".

的数组

如何在 javascript 中的 1 canvas 上同时播放多个动画

How can I have multiple simultaneous animations on 1 canvas in javascript

javascript

animation

drawing

canvas

requestanimationframe