I would like to ask canvas to draw multiple small balls that collide with each other, how to add events to each small ball?

canvas draws multiple ball collisions on the canvas. How can I add a click event to the ball?

as far as I know, adding an event to the canvas actually gets an area on the canvas to fix an event? Is it true that the ball can not be added if it keeps changing its position? Unless the activity space of each ball is fixed?
Thank you.


build a constructor for the sphere, defining its width, height, speed, move methods, and so on.
listens to the coordinates of the mouse on the canvas, and then determines whether it is in the range of which ball or not.


canvas painted on the ball you can definitely get the center coordinates of the ball, you only need to judge whether the distance between the point you click on the mouse and the center of the circle is less than the radius, which means you can click on the event


this is a good solution. You only need to take each circle as an object and maintain the coordinate information within the object.
you can try this canvas 2d rendering library, https://www.github.com/PengJi.,
small size, powerful function, support for drawing, graphics binding time, drag, zoom in and out, and so on.
I hope it can be helpful to you.


each ball contains its own coordinate and radius information. When the user clicks, all the balls are traversed to see if they meet the requirements.


treats each ball as an object with its own radius of width and height. Calculate the position per second. If the distance from another ball is less than the radius, it means that you have collided

.
Menu