javascript - How to detect if a shape was clicked (HTML5 canvas)? - Stack Overflow

admin管理员组

文章数量:1307752

I am drawing different shapes like rectangle, triangle, hexagon etc. using the canvas and lineTo method like in this blog. I just want a simple way to find if I clicked inside a shape. I can do it by filling the shape with some color and the checking if the point I clicked has this color but I don't want to use fill color method. Is there any other way to do it?

Also found isPointInPath but it did not work.

I am drawing different shapes like rectangle, triangle, hexagon etc. using the canvas and lineTo method like in this blog. I just want a simple way to find if I clicked inside a shape. I can do it by filling the shape with some color and the checking if the point I clicked has this color but I don't want to use fill color method. Is there any other way to do it?

Also found isPointInPath but it did not work.

• javascript
• html
• canvas

Share Improve this question Follow edited Aug 23, 2017 at 4:12 Flip 6,78188 gold badges5050 silver badges8383 bronze badges asked Feb 12, 2013 at 11:12 SandySandy 14.1k2222 gold badges7979 silver badges111111 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

Check in here:

Javascript check Mouse clicked inside the Circle or Polygon

meouw answer works for sure I've test it and guarantee it works. It seems that there are some other solutions, too that have been upvoted, maybe you can try them, either

You could either try some canvas frameworks like http://kineticjs./ (check events section) which support already clickable elements out of the box or you'll need to write two functions, one which gives you your relative mouse click coordinates inside the canvas element (I used the one described here: https://stackoverflow./a/5932203/532102) and after write another function which checks if the returned mouse coordinates intersect with your shape on the canvas.

本文标签： javascriptHow to detect if a shape was clicked (HTML5 canvas)Stack Overflow