Question

我对使用JavaScript进行编码非常陌生并感到困惑！

首次运行此代码时，一切正常。然而，一旦你移动了一点点，你就会开始意识到它变得越来越滞后于它几乎无法播放的地方。

造成这种情况的原因是什么？

我该如何解决？

<html>
<head>
    <title>Rotate</title>
    <script src="Tank.js"></script>
</head>
<body>
    <canvas id="canvas" style="border:1px solid #ccc" width="700" height="500">
    </canvas>
    <script>
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');
        var mouseX, mouseY;

        function Tank(x, y){
            this.x = x;
            this.y = y;
            this.angle;
        }

        Tank.prototype.draw = function(){
            context.save();
            context.translate(this.x, this.y);
            context.rotate(this.angle);
            context.fillStyle = "green";
            context.arc(0,0,30,0,2*Math.PI);
            context.fill();
            context.fillStyle = "red";
            context.fillRect(0,-10,50,20);
            context.restore();
        }

        Tank.prototype.update = function(mouseX, mouseY){
            var dx = mouseX - this.x;
            var dy = mouseY - this.y;
            this.angle = Math.atan2(dy, dx);
        }

        canvas.addEventListener('mousemove', mouseMove);

        function mouseMove(evt){
            mouseX = evt.x;
            mouseY = evt.y;     
        }

        var tank = new Tank(350, 250);

        function gameLoop(){
            context.clearRect(0,0, canvas.width, canvas.height);
            tank.draw();
            tank.update(mouseX, mouseY);
        }

        setInterval(gameLoop,20);   
    </script>
</body>
</html>

Answer 1

在开始新路径之前，您需要致电context.beginPath()。如果没有这个，你对arc的调用会建立相同的路径，每帧都会有越来越多的子路径，因此每个连续的帧都会绘制出更复杂的形状。随着时间的推移，它也会占用越来越多的记忆。

修正小提琴：https://jsfiddle.net/mmkzes7n/2/

在这个小提琴中，我也为requestAnimationFrame更改了setInterval，我认为这是一个好主意。您可以阅读相关内容并决定是否要进行相同的更改。（如果实际需要重绘，你可以将它增强为只请求动画帧。目前只有当鼠标位置移动时才会这样，但随着游戏的发展，我确信它会比那更多。）

JavaScript鼠标移动导致滞后？

1 个答案: