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

Question

我是画布的新手，我想听一下以前在画布上绘制的圆圈上的鼠标单击。 当我单击圆圈时，我试图更改圆圈的颜色（也许变为绿色）。

 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>

Answer 1

使用SVG，这很容易-圆圈是一个元素，可以有单击处理程序，并且可以进行fill以改变颜色。

使用Canvas，您需要：

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

Answer 2

只需再次添加圆弧路径，然后将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... };

提示：您可以改为使用r ²来跳过对dist进行平方运算。

Answer 3

通过Canvas，可以使用addEventListener函数。 您可以检测到很多鼠标事件：mousedown，mouseup，mousemove，mouseout和mouseover。 这是一个例子：

<!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>

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

问题描述

3 个解决方案

解决方案1
2 已采纳 2015-06-11 02:33:16

解决方案2
1

例

解决方案3
0 2015-06-11 02:50:14

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

问题描述

3 个解决方案

解决方案1 2 已采纳 2015-06-11 02:33:16

解决方案2 1

例

解决方案3 0 2015-06-11 02:50:14

解决方案1
2 已采纳 2015-06-11 02:33:16

解决方案2
1

解决方案3
0 2015-06-11 02:50:14