當我嘗試在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