当我尝试在HTML5 Canvas中移动PNG图片时，图像不稳定

Question

因此，当我遇到一个令人讨厌的问题时，我正在使用HTML5 Canvas和纯Javascript进行游戏。 当我尝试使用setInterval移动图片移动时，它可以工作，但图片会像断断续续一样抽动。 我的猜测是，它与图像需要每10毫秒加载一次的事实有关。 请帮助我解决此问题。

下面的示例代码：

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset = "UTF-8" />
    </head>
    <body>
        <canvas id = "myCanvas" width = "1000" height = "500" style="border:1px solid #000000;">
        </canvas>
        <script type = "text/javascript">
            var canvas = document.getElementById("myCanvas");
            var ctx = canvas.getContext("2d");
            var x = 0;
            var image = new Image();
            image.src = 'spaceship.png';

            function draw(){
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                image.src = 'spaceship.png';
                image.onload = function(){
                    ctx.drawImage(image, x, 0);
                }
                x += 2;
            }
            setInterval(draw,10);
        </script>
    </body>
</html>

Answer 1

首先，10ms的间隔太短了。 即使使用60fps，您也将有〜16.67ms的间隔。

另外，在可用时，在执行动画时不应使用setInterval ，而应使用requestAnimationFrame 。 这样可以使支持它的浏览器上的动画更加流畅。

最后要优化的是每帧图像移动2px的事实。 您不能确定在相同的时间间隔后调用每个帧。 这样，您将在快速计算机上获得较快的动画，而在慢速计算机上获得较慢的动画。 您应该使用当前时间以及自上一个动画帧以来经过的时间增量（例如，使用Date.now() ）。

最后要注意的是，映像的onload回调仅应调用一次。 而且这是在执行任何动画或绘图之前。 因此，只有在加载图像之后，动画才应该开始。

移动球的示例：

 var canvas = document.getElementById("canvas"), ctx = canvas.getContext("2d"), lastTimestamp, imageX = 0; canvas.width = 300; canvas.height = 300; var image = new Image(); image.onload = function () { requestAnimationFrame(draw); }; image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAMAAADzapwJAAAAolBMVEUAAAARqu4YrO4bre4aq+wbrOocrOocq+sbreobquocrOkcrOobq+oaqugdresir+sosewus+w0te01tu06t+0+ue4/ue5GvO5Ov+9cxPBfxfFoyPFwy/J0zPJ4zvN6z/OA0fSE0vSG0/SJ1PSQ1vWR1/WT1/WV2PWY2faZ2vad2/ai3fej3fel3ven3/ev4vix4/i45vm65vm85/m+6PnA6fpEpw5TAAAADnRSTlMADx8vX29/j5+vv8/f79ErPTAAAADdSURBVBgZBcELThsxFADAef5sQkAVEr3/JcsSNrafOxNAKT2wRyYIiFsPwB7XRqC+FY9Smpnjks9FEO/l7c8BOP+NPLfKe/34qgDHx5VtqI7j9hcQrdV9/917lbj5BGhHa618ukVp8TgAGpr7I1rpDgAbyaGXagMYyxpstYUyOmAtuIpouFavAOYr0XZkmbO2FthzJGm31ebBWhcA0yrDAgBYRlmuBADmr1XytU8AkKdXVqvvbAFgnplPldVz9gDM79zPVNmjuUTBvH6sMwmIewdwvTYCqL0H9msk+A8oZ3I4nbdKXwAAAABJRU5ErkJggg=="; function draw() { var now = Date.now(), timeDelta = (now - (lastTimestamp || now)) / 1000; // in seconds imageX += timeDelta * 30; // meaning: 30px per second ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(image, imageX, 0); lastTimestamp = now; requestAnimationFrame(draw); }

 <canvas id="canvas" />

当我尝试在HTML5 Canvas中移动PNG图片时，图像不稳定

问题描述

下面的示例代码：

1 个解决方案

解决方案1
4 已采纳 2016-08-24 18:46:32

当我尝试在HTML5 Canvas中移动PNG图片时，图像不稳定

问题描述

下面的示例代码：

1 个解决方案

解决方案1 4 已采纳 2016-08-24 18:46:32

解决方案1
4 已采纳 2016-08-24 18:46:32