Question

我正在尝试使用JavaScript将图像动画到画布中。一切似乎都在控制台中按预期进行，但图像不会加载到画布上。这是我的代码

<body>
    <canvas id="gameDisplay">

    </canvas>
</body>
<script>
    var canvas = null;
    var context = null;
    var frameRate = 1000 / 30;
    var frame = 0;
    var assets = [
        'images/char.png',
        'images/char1.png'
    ];
    var frames = [];

    var onImageLoad = function() {
        console.log('IMAGE!!');
    };

    var setup = function() {
        canvas = document.getElementById('gameDisplay');
        context = canvas.getContext('2d');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        for (var i = 0; i < assets.length; i++) {
            frames.push(new Image());
            frames[i].src = assets[i];
            frames[i].onload = onImageLoad;

        }
    };
    var animate = function() {
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.drawImage(frames[frame], 192, 192);
        frame = (frame + 1) % frames.length;
    }
    setup();
</script>

该项目位于here。

Answer 1

当你有两个版本的代码时很难回答;问题中的代码和下面评论中链接网站上的不同代码。您正在尝试实施Udacity课程，我看到两个您没有按照说明操作的地方。必须在.src之前设置1- .onload 在设置中调用2- setInterval而不是动画我做了这些更改，并获得了一个基本的动画工作，虽然我无法下载你的图像，因为它一直崩溃我的浏览器。请参阅课程视频中的视频＃13。

我认为你需要阅读画布和动画文档，试试这些 MDN canvas api 你没有正确地获得画布，一旦你这样做，你可以调用drawImage。另外，对于动画，请查看requestAnimationFrame（），试试这个你开始了 requestAnimationFrame

使用JavaScript将图像加载到画布中

1 个答案: