Question

我正在使用精灵为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

2nd：https://imgur.com/I4SY0c9

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

Answer 1

问题在于您需要在sprite函数中的每个渲染之前清除画布。
而是渲染所有三个图像，并在每一轮渲染之前清除画布。
要考虑的另一件事是，每当您获得动画帧时都渲染它们。只需遍历一系列“怪物”即可。

如何在JavaScript的1个画布上同时显示多个动画

1 个答案: