Canvas点击坐标偏移问题求助：点击无方形显示，偏移后仍异常

问题根源 #

• Canvas高度设置语法错误：代码中canvas,height = 700;使用了逗号而非句号，导致Canvas高度未被正确设置为700px，维持默认的150px高度，这直接引发点击区域与实际绘制区域不匹配，出现仅左上角点击有效、图形拉伸的现象。
• 点击坐标未做相对转换：e.x/e.y是浏览器窗口级别的坐标，并非Canvas元素内部的相对坐标，直接使用会导致绘制位置偏移。
• 爆炸类图像初始化错误：this.image = new this.image();是无效写法，无法正确创建Image实例加载爆炸素材。

分步解决 #

1. 修复Canvas尺寸错误 #

将错误的高度设置代码修改为：

canvas.height = 700;

2. 转换点击坐标为Canvas相对坐标 #

通过getBoundingClientRect()获取Canvas在页面中的位置，计算出点击点在Canvas内部的相对坐标：

window.addEventListener('click', function(e){
    // 获取Canvas的页面位置信息
    const canvasRect = canvas.getBoundingClientRect();
    // 计算相对Canvas的坐标
    const canvasX = e.clientX - canvasRect.left;
    const canvasY = e.clientY - canvasRect.top;

    // 绘制测试方块
    ctx.fillStyle = 'white';
    ctx.fillRect(canvasX, canvasY, 50, 50);
    // 创建爆炸实例
    explosion.push(new Explosion(canvasX, canvasY));
});

3. 修正爆炸类的图像初始化 #

将爆炸类中的图像创建代码改为标准写法：

class Explosion {
    constructor(x, y){
        this.x = x;
        this.y = y;
        this.spriteWidth = 200;
        this.spriteHeight = 179;
        this.width = this.spriteWidth / 2;
        this.height = this.spriteHeight / 2;
        this.image = new Image(); // 修正此处
        this.image.src = "boom.png";
        this.frame = 0;
    }

    update(){
        this.frame++;
        // 限制帧范围，防止超出 sprite 图帧数（根据实际素材调整）
        if(this.frame > 5) this.frame = 0;
    }

    draw(){
        // 让爆炸中心对齐点击位置（减去宽高的一半）
        ctx.drawImage(
            this.image,
            this.spriteWidth * this.frame, 0,
            this.spriteWidth, this.spriteHeight,
            this.x - this.width/2, this.y - this.height/2,
            this.width, this.height
        );
    }
}

4. 添加动画循环（实现爆炸帧动画） #

要让爆炸动起来，需要添加动画循环来更新和绘制所有爆炸实例：

function animate(){
    // 清空Canvas准备下一帧绘制
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // 遍历更新所有爆炸实例
    explosion.forEach((boom, index) => {
        boom.update();
        boom.draw();
        // 移除播放完毕的爆炸（根据帧数量调整判断条件）
        if(boom.frame > 5){
            explosion.splice(index, 1);
        }
    });
    requestAnimationFrame(animate);
}
// 启动动画
animate();

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