canvas坐标相对位置计算方式

canvas坐标相对位置计算方法

原创已于 2025-05-07 15:40:25 修改 · 144 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html

于 2025-05-07 15:39:09 首次发布

    const rect = this.canvas.getBoundingClientRect();

    // 🛠 补偿显示缩放带来的差异
    const scaleX = this.canvas.width / rect.width;
    const scaleY = this.canvas.height / rect.height;

    const mouseX = (e.clientX - rect.left) * scaleX;
    const mouseY = (e.clientY - rect.top) * scaleY;

    // 💡 反向映射到原图坐标系
    const x = (mouseX - this.originX) / this.scale;
    const y = (mouseY - this.originY) / this.scale;