JavaScript鼠标移动会导致滞后吗?

布拉德

我对使用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>
特兰比

您需要先致电context.beginPath()才能开始新的路径。没有这个,您的调用将arc在每帧中使用越来越多的子路径构建相同的路径,因此每个后续帧都将绘制更复杂的形状。随着时间的流逝,它也占用了越来越多的内存。

固定小提琴:https : //jsfiddle.net/mmkzes7n/2/

在这个小提琴中,我也更改setIntervalrequestAnimationFrame,我认为这是个好主意。您可以阅读有关内容,并决定是否要进行相同的更改。(然后,您可以增强它,使其仅在确实需要重绘时才请求动画帧。目前,这仅是在鼠标位置已移动的情况下才能实现的,但是随着游戏的发展,我敢肯定它会更多。)

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章