如何让Canvas中小球自动移动而非每次点击才移动，解决requestAnimationFrame作用域问题

核心问题点 #

• this作用域异常：你定义的loop是普通函数，被requestAnimationFrame调用时this指向全局对象，无法访问Game实例的balls、ctx等属性，导致逻辑报错失效。
• 动画逻辑错位：你把新建小球的逻辑写在了loop循环内，会导致每帧都生成新的小球，不符合点击一次生成一个小球的需求，且每次点击都新开一个动画循环，会出现重复渲染、性能损耗问题。
• Ball类逻辑错误：drawBall方法中每次绘制都重新计算velocity，会导致小球速度逻辑异常，速度参数应该在小球初始化时就根据点击位置计算完成，不需要每次绘制重算。

修复后的代码 #

1. 调整Ball类 #

class Ball {
    constructor(props) {
        // 构造时传入ctx、炮台位置、点击位置、初始小球位置等参数
        this.ctx = props.ctx;
        this.cannonPosX = props.cannonPosX;
        this.cannonPosY = props.cannonPosY;
        this.mouseClickPosX = props.mouseClickPosX;
        this.mouseClickPosY = props.mouseClickPosY;
        this.ballPosX = props.initialBallPosX;
        this.ballPosY = props.initialBallPosY;
        this.color = props.color || '#000';
        // 初始化时就算好角度和速度，不需要每次绘制重算
        this.angle = Math.atan2(this.mouseClickPosY - this.cannonPosY, this.mouseClickPosX - this.cannonPosX);
        this.velocity = {
            x: Math.cos(this.angle),
            y: Math.sin(this.angle)
        };
        this.ballRadius = 2;
    }

    updateBall() {
        this.ballPosX = this.ballPosX + this.velocity.x
        this.ballPosY = this.ballPosY + this.velocity.y
    }

    drawBall() {
        this.ctx.beginPath();
        this.ctx.arc(this.ballPosX, this.ballPosY, this.ballRadius, 0, Math.PI * 2, false);
        this.ctx.closePath();
        this.ctx.fillStyle = this.color;
        this.ctx.fill();
    }

    animateBall() {
        this.drawBall();
        this.updateBall();
    }
}

2. 调整Game类 #

class Game {
    constructor(props) {
        // ... 原有初始化逻辑
        this.balls = []
        this.canvas = props.canvas;
        this.ctx = this.canvas.getContext('2d');
        this.player = props.player;
        this.playerPosX = props.playerPosX;
        this.playerPosY = props.playerPosY;
        // 全局只启动一次动画循环
        this.loop();
        this.canvas.addEventListener('mousedown', (e) => {
            this.handleMouseClicks(this.canvas, e)
        });
    }
    
    // 动画循环改成箭头函数，自动绑定this到Game实例
    loop = () => {
        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
        // 绘制所有小球
        this.balls.forEach((ball) => {
            ball.animateBall();
        });
        // 绘制玩家
        this.player.drawPlayer(this.playerPosX, this.playerPosY);
        requestAnimationFrame(this.loop);
    }

    handleMouseClicks(canvas, e) {
        // 计算点击坐标相对于canvas的偏移
        const rect = canvas.getBoundingClientRect();
        const clickX = e.clientX - rect.left;
        const clickY = e.clientY - rect.top;
        // 点击时才新增小球
        this.balls.push(new Ball({
            ctx: this.ctx,
            cannonPosX: this.playerPosX,
            cannonPosY: this.playerPosY,
            mouseClickPosX: clickX,
            mouseClickPosY: clickY,
            initialBallPosX: this.playerPosX, // 小球初始位置和玩家位置对齐
            initialBallPosY: this.playerPosY
        }));
   }
}

优化说明 #

• 动画循环全局仅初始化一次，不会重复创建，性能更稳定
• 点击事件仅负责新增小球，和渲染逻辑完全拆分
• 小球参数初始化时完成计算，避免重复计算导致的逻辑异常
• 用箭头函数绑定loop的this指向，无需额外处理作用域问题

内容的提问来源于stack exchange，提问作者pileup