使用画布和 javascript 单击对象

Question

我创建了一个画布，里面有一个圆圈，我正在尝试检测鼠标单击。

我正在计算鼠标单击和圆的半径之间的距离。当点击位于圆心旁边时，输出应该是

0

，但是我得到的不仅仅是

400

！

这是我尝试过的代码。我不明白我做错了什么！？

let canvas = document.querySelector('canvas');
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);
  };
}

let myCircle = new Circle(100, 100, 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);
});

canvas {
  border: 1px solid black;
  background-color: wheat;
  width: 100%;
}

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

Answer 1

总的来说，除了一个细节之外，您的代码是正确的。 不幸的是，canvas 不支持相对大小（例如 %）。事实上他确实这样做了，但这是一种应用于结果图片而不是画布本身的样式。

因此，您唯一需要更改的就是从canvas元素的CSS代码中删除

width: 100%;

，同时通过html属性或javascript代码设置canvas宽度和高度的具体值。

例如：

let canvas = document.querySelector('canvas');
canvas.width = 500;
canvas.height = 400;
...