使用 png 文件的画布动画答案

【问题标题】：Canvas animation using png file使用 png 文件的画布动画
【发布时间】：2014-06-03 18:08:48
【问题描述】：

我正在尝试使用画布和具有透明背景的汽车的 png 文件制作赛车游戏。

当我按住其中一个箭头时遇到问题。在运动的相反方式中，它看起来像汽车的旧位置的白色阴影。

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">

            var canvas;
            var ctx;
            var car = new Image();
            var x = 0;
            var y = 0;


            function startUp(){
                canvas = document.getElementById('myCanvas');
                ctx = canvas.getContext('2d');

                loadImages();
                startGameLoop();
            }


            function startGameLoop() {

                setInterval(function() {
                    drawScreen();
                    drawCar();
                }, 16);
                window.addEventListener('keydown', whatKey, true);

            }

            function drawScreen(){

                ctx.clearRect(0, 0, canvas.width, canvas.height);

                ctx.fillStyle = '#aaaaaa';
                ctx.rect(0, 0, canvas.width, canvas.height);
                ctx.fill();
            }

            function drawCar(){

                ctx.drawImage(car, x ,y, 200, 103);
            }

            function whatKey(evt) {

                switch (evt.keyCode) {

                    // Left arrow.
                    case 37: {
                        x -= 15;
                    }
                        break;

                    // Right arrow.
                    case 39:{
                        x += 15;
                    }
                        break;

                    // Down arrow
                    case 40:{
                        y += 15;
                    }
                        break;

                    // Up arrow
                    case 38: {
                        y -= 15;
                    }
                        break;
                }

            }

            function loadImages() {
                car.src = 'http://sammywasem.com/images/f3-top.png';
            }
        </script>
    </head>

    <body onload="startUp()">
        <canvas id="myCanvas" width="1050" height="620">
        </canvas>
    </body>
</html>

【问题讨论】：

标签： html animation canvas

【解决方案1】：

汽车移动实际上是正确的方式。
假设您按下右键：事件被发送到窗口，并被您的代码困住：汽车向右行驶。但是这个事件也是由整个窗口来处理的，这里理解为：将窗口向右移动。
所以你最后看到的，由于车窗比汽车移动更多，是向汽车左侧移动。

你需要做的是防止关键事件在你处理后进一步冒泡：它是用

完成的

event.preventDefault();

和

event.stopPropagation();

查看mdn 以查看preventDefault 或stopPropagation 的规格。

我已经修改了您的代码，并对其进行了更新：

http://jsbin.com/joboxuvu/1/edit?js,output

【讨论】：

感谢您的回答，这是我的问题之一。我在我的小型机上尝试了我的原始代码，即上面发布的代码，它运行良好。
不客气。你的意思是还有问题？我在 Chrome 或 Firefox (mac OS) 中都看不到您描述的白色阴影。
问题出在我的电脑上，我想你看不到。当我按住其中一个箭头时，每次执行循环时，屏幕都会被清空，汽车会被绘制在新的 x 或 y 上，而汽车的白色阴影会被绘制在旧的 x 或 y 上。它发生在所有重要的浏览器中。不知道，是我的显卡设置的吗？
它很可能来自您的液晶屏幕的运动模糊（旧图像的颜色设置需要一些时间才能达到新值）。示例：hardware.fr/medias/photos_news/00/18/IMG0018164.jpg 根据 lcd 的质量，此效果可能很重要，也可能无效。
非常感谢。我的显示器的响应时间最快，现在正常并且工作正常。对于我的循环，我应该使用什么功能？我看到最好使用 requestAnimationFrame 而不是 setTimeout 或 setInterval，或 setInterval(function, 1); （尽可能快地执行）。再次感谢您的帮助。