Canvas与JavaScript圆形点击检测中距离计算异常问题排查

你遇到的核心问题是Canvas的坐标空间与CSS显示尺寸不匹配。

Canvas元素有两个独立的尺寸：

• 元素自身的width/height属性：这是Canvas绘图时使用的坐标空间大小，默认是300px×150px
• CSS设置的width/height：这是Canvas在页面上显示的实际尺寸

你给CSS加了width:100%，让Canvas撑满容器，但没设置Canvas的width和height属性，导致绘图坐标空间还是默认的300×150，而鼠标点击计算的是页面上实际显示的像素位置，两者比例严重失调，所以点击圆心附近时，计算出的距离会远大于预期。

有两种常用的修复方式：

方法1：同步Canvas属性尺寸与CSS显示尺寸 #

直接设置Canvas的width和height属性，使其等于页面上实际显示的尺寸。可以通过获取容器的宽高来动态设置：

<div class="container">
  <canvas id="app"></canvas>
</div>

canvas {
  border: 1px solid black;
  background-color: wheat;
  width: 100%;
}
.container {
  width: 800px; /* 示例容器宽高，可根据实际情况调整 */
  height: 600px;
}

let canvas = document.querySelector('canvas');
const container = document.querySelector('.container');
// 设置Canvas属性尺寸与容器一致
canvas.width = container.clientWidth;
canvas.height = container.clientHeight;

let ctx = canvas.getContext('2d');
let mousePos = {
  x: undefined,
  y: undefined
};

function Circle(x, y, r) {
  this.x = x;
  this.y = y;
  this.r = r;

  this.draw = function() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
    ctx.stroke();
    ctx.fill();
    ctx.closePath();
  };

  this.clickCircle = function(xmouse, ymouse) {
    let distance = Math.sqrt(
      (xmouse - this.x) * (xmouse - this.x) +
      (ymouse - this.y) * (ymouse - this.y)
    );
    console.log(distance);
  };
}

// 现在可以基于Canvas实际尺寸设置圆心
let myCircle = new Circle(canvas.width/2, canvas.height/2, 20);
myCircle.draw();

canvas.addEventListener('click', e => {
  const rect = canvas.getBoundingClientRect();
  mousePos.x = e.clientX - rect.left;
  mousePos.y = e.clientY - rect.top;

  myCircle.clickCircle(mousePos.x, mousePos.y);
});

方法2：转换鼠标坐标到Canvas绘图空间 #

如果需要保持Canvas属性尺寸不变，仅通过CSS缩放显示，可以在计算鼠标位置时，根据缩放比例转换坐标：

canvas.addEventListener('click', e => {
  const rect = canvas.getBoundingClientRect();
  // 计算缩放比例
  const scaleX = canvas.width / rect.width;
  const scaleY = canvas.height / rect.height;
  // 转换鼠标坐标到Canvas绘图空间
  mousePos.x = (e.clientX - rect.left) * scaleX;
  mousePos.y = (e.clientY - rect.top) * scaleY;

  myCircle.clickCircle(mousePos.x, mousePos.y);
});

修改后，点击圆心附近，控制台输出的距离会趋近于0，符合预期。

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