檢測HTML5畫布上的圓圈上的鼠標單擊
[英]Detect mouse clicks on circles on HTML5 canvas
問題描述
我是畫布的新手，我想聽一下以前在畫布上繪制的圓圈上的鼠標單擊。 當我單擊圓圈時，我試圖更改圓圈的顏色（也許變為綠色）。
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>
3 個解決方案
解決方案1
2 已采納 2015-06-11 02:33:16
使用SVG，這很容易-圓圈是一個元素，可以有單擊處理程序，並且可以進行fill以改變顏色。
使用Canvas，您需要：
- 保存繪制的每個圓的數據（中心和半徑）
- 捕獲在畫布上單擊為
cx, cy - 檢查每個圓數據
x, y, r，看是否dx * dx + dy * dy < r * r，其中dx = cx - x，dy = cy - y。 單擊滿足此方程式的圓 - 重畫圓圈
解決方案2
1
只需再次添加圓弧路徑，然后將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 2來跳過對dist進行平方運算。
解決方案3
0 2015-06-11 02:50:14
通過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 在 canvas 中捕獲鼠標點擊
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.