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

Question

I'm new to canvas and I'm trying to listen to mouse clicks on the circles that I previously drew on canvas. 我是画布的新手，我想听一下以前在画布上绘制的圆圈上的鼠标单击。 I'm trying to change the colour of the circles (maybe to green) when I click on them. 当我单击圆圈时，我试图更改圆圈的颜色（也许变为绿色）。

 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

With SVG, it would be easy - a circle is an element, and can have a click handler, and has fill that you can manipulate to change colour. 使用SVG，这很容易-圆圈是一个元素，可以有单击处理程序，并且可以进行fill以改变颜色。

With Canvas, you need to: 使用Canvas，您需要：

save the data for each circle you draw (center and radius) 保存绘制的每个圆的数据（中心和半径）
capture click on canvas as cx, cy 捕获在画布上单击为cx, cy
check every circle data x, y, r you have, see whether dx * dx + dy * dy < r * r , where dx = cx - x , dy = cy - y . 检查每个圆数据x, y, r ，看是否dx * dx + dy * dy < r * r ，其中dx = cx - x ， dy = cy - y 。 Circles that satisfy this equation were clicked 单击满足此方程式的圆
repaint the circle 重画圆圈

Answer 2

Just add the arc path again and use isPointInPath() with the mouse position. 只需再次添加圆弧路径，然后将isPointInPath()与鼠标位置配合使用即可。 Only one arc can be tested at once, but it's fast to clear and add new paths. 一次只能测试一个弧，但是清除和添加新路径的速度很快。 Do this in a loop. 循环执行此操作。

Example 例

 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>

The other approach is to use math and trigonometry: 另一种方法是使用数学和三角学：

// 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... };

Tip: you can skip squaring the dist by using r ² instead. 提示：您可以改为使用r ²来跳过对dist进行平方运算。

Answer 3

With Canvas, you can use function addEventListener. 通过Canvas，可以使用addEventListener函数。 There are quite a few mouse events you can detect: mousedown, mouseup, mousemove, mouseout and mouseover. 您可以检测到很多鼠标事件：mousedown，mouseup，mousemove，mouseout和mouseover。 Here is a example: 这是一个例子：

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

Example 例

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

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

问题描述

3 个解决方案

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

解决方案2 1

Example 例

解决方案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