请问 canvas 画出多个相互碰撞的小球，怎么在每个小球上添加事件

Question

canvas 在画布画出多个小球碰撞，请问如何给小球添加点击事件？

据我所知，画布上添加事件实际上获取画布上的某个区域来固定一个事件？是否小球不断改变位置就不可以加了？除非每个小球的活动空间是固定的？
谢谢。

Answer 1

给球体建一个构造函数，定义其width、height、speed、move方法等。
监听鼠标在canvas上的坐标，然后判断是否在哪个球的范围内或不在范围内。

Answer 2

canvas上画的球 你肯定能获取到球的圆心坐标，只需要判断你鼠标点击的点和圆心的距离， 是否小于半径，小于半径就说明在圆内 就可以出发点击事件

Answer 3

这个很好解决，只需要将每个圆作为一个对象，维护对象内的坐标信息就行了。
可以尝试一下这个 canvas 2d 渲染库，https://www.github.com/PengJi...，
体量小，功能强大，支持画图，图形绑定时间，拖拽，放大缩小等。
希望对你有所帮助。

Answer 4

每个球都含有自身的坐标和半径等信息，在用户点击的时候对所有的球进行遍历，看看是否达到要求。

Answer 5

把每个球当作一个对象，拥有自己的宽高半径。每秒计算位置，如果和别的球的距离小于半径，就说明碰撞了