canvas绘制的柱状图，如何实现选中其中的某一条柱子呢

Question

因为某些业务的原因，只能使用canvas绘制柱状图。请问如何实现选中柱状图其中的某一条bar呢，想要鼠标点到其中的某一条bar对其做一些操作

Answer 1

canvas的鼠标事件基本都是判断鼠标位置与图形路径的关系

对于简单图形如圆、长方形等，可以利用圆心半径(圆)或顶点(长方形)进行判断，对于多边形，可以使用射线法判断点是否在多边形内，从而判断是否选中了多边形

这里有个点击圆的案例，你可以仿照这个实现点击柱状图，具体实现检索can1.onclick https://blog.csdn.net/hf87291...

或者使用射线法判断关系，在常用空间分析函数中搜pointInPolygon

Answer 2

https://refined-x.com/2019/04...

Answer 3

画条形图用 echarts 不香吗？
如果出于某些原因不能用这些绘图库，允悲。好在前端无绝人之路，CanvasRenderContext2D 其实有个方法 isPointInPath ，可以用来判断点是否在路径内，这些库可能也是用这个 API 来实现鼠标操作的。
但是画图和画可以交互的图，难度不在同一个级别。