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

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>

该项目位于此处。

Answer 1

当您有两个版本的代码时，很难回答。 问题中的代码以及您在下面的评论中链接的站点上的其他代码。 您正在尝试实施Udacity课程，但是我发现有两个地方没有按照说明进行操作。 1- .onload必须在.src之前设置
2-setInterval在设置中没有动画调用，我进行了这些更改并获得了基本的动画效果，尽管我无法下载您的图像，因为它一直使我的浏览器崩溃。 请参阅课程视频中的视频＃13。

我认为您需要阅读canvas和animation文档，尝试使用这些MDN canvas api。您没有正确获得canvas，一旦完成，就可以调用drawImage。 另外，对于动画，请查看requestAnimationFrame（），尝试此操作以使您入门。 requestAnimationFrame

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

问题描述

1 个解决方案

解决方案1
0 2016-12-18 03:47:59

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

问题描述

1 个解决方案

解决方案1 0 2016-12-18 03:47:59

解决方案1
0 2016-12-18 03:47:59