检测 HTML5 画布上圆圈上的鼠标点击

Detect mouse clicks on circles on HTML5 canvas

本文关键字：鼠标 HTML5 检测      更新时间：2023-09-26

我是画布新手，我正在尝试听鼠标在我之前在画布上绘制的圆圈上的点击。当我单击圆圈时，我正在尝试更改圆圈的颜色（可能是绿色）。

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var radius = 15;
for (var i = 0; i < 600; i += 100) {
  var x = 100 + i;
  var y = 100;
  draw_circle(i, x, y, radius);
}
function draw_circle(ID, x, y, radius) {
  context.beginPath();
  context.arc(x, y, radius, 0, Math.PI * 2, false);
  context.fillStyle = 'red';
  context.fill();
  context.lineWidth = 3;
  context.strokeStyle = 'black';
  context.stroke();
  context.closePath();
}
<!DOCTYPE HTML>
<html>
<head>
  <style>
    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0px;
    }
  </style>
</head>
<body>
  <canvas id="myCanvas" width="700" height="700"></canvas>
</body>
</html>

只需再次添加弧形路径并将isPointInPath()与鼠标位置一起使用即可。一次只能测试一个弧，但清除和添加新路径的速度很快。在循环中执行此操作。

例

var c = document.querySelector("canvas"), ctx = c.getContext("2d");
getArc(50, 50, 40);
ctx.fill();
c.onclick = function(e) {
  var rect = this.getBoundingClientRect(),   // get abs. position of canvas
      x = e.clientX - rect.left,             // adjust mouse-position
      y = e.clientY - rect.top;
  
  getArc(50, 50, 40);                        // get path wo/ filling/stroking it
  if (ctx.isPointInPath(x, y)) alert("Clicked");
};
function getArc(x, y, r) {
  ctx.beginPath();
  ctx.arc(x, y, r, 0, Math.PI*2);
  ctx.closePath();
}
<canvas></canvas>

另一种方法是使用数学和三角函数：

// at this point we have the mouse position, so:
var dx = x - arcX,
    dy = y - arcY,
    dist = Math.abs(Math.sqrt(dx*dx + dy*dy));
if (dist <= radius) { ...clicked... };

提示： 您可以改用 r2 跳过对 dist 进行平方。

使用 SVG，这很容易 - 圆是一个元素，可以有一个单击处理程序，并且具有您可以操作以更改颜色的fill。

使用 Canvas，您需要：

  • 保存绘制的每个圆的数据（中心和半径）
  • 捕获画布上的单击作为cx, cy
  • 检查您拥有的每个圆圈数据x, y, r，查看是否dx * dx + dy * dy < r * r、dx = cx - x、dy = cy - y 。单击满足此等式的圆圈
  • 重新绘制圆圈

使用 Canvas，您可以使用函数 addEventListener。您可以检测到很多鼠标事件：鼠标按下、鼠标向上、鼠标移动、鼠标退出和鼠标悬停。下面是一个示例：

<!DOCTYPE HTML>
<html>
<head>
      <style>
            html,
            body {
                 width: 100%;
                 height: 100%;
                 margin: 0px;
            }
      </style>
      <script>
            function initialize() {
                 var canvas = document.getElementById("myCanvas");
                 canvas.addEventListener("mousedown", doMouseDown, false);
            }
            function doMouseDown() {
                 canvas_X = event.pageX;
                 canvas_Y = event.pageY;
                 alert("X = " + canvas_X + "Y = " + canvas_Y);
            }
      </script>
</head>
<body>
     <canvas id="myCanvas" width="700" height="700"></canvas>
</body>
</html>
相关文章：