javascript - canvas怎么根据坐标获取上面的内容

Question

就是我用canvas 在页面上绘制了一些文字， 那我该怎么根据绘制的坐标来获取上面的文字呢

这个圆盘上面的字是利用canvas 绘制上去的，然后我想获取指针所在的位置上的文字，应该怎么办，哪位大虾可以帮帮忙~

Answer 1

思路是这样的，把绘制的每个区域抽象成单独的对象，每个对象中可以储存各自的信息(比如title, content, position等)，每个对象中都包含各自的判断点是否在当前对象区域内的判断函数，这样就可以知道点到了哪个对象，也可以拿到对象内的数据， 触发相应的事件。

这样说可能不太直观，你可以看一下我封装好的一个库。

https://github.com/PengJiyuan...

用这个库做的一个图表

https://github.com/PengJiyuan...

Answer 2

我猜你是需要 getImageData 这个方法。

ps: 但是对于这个小游戏来说，获取图形，然后再对应到字符串上面，这个做法有点太困难也太复杂了。

Answer 3

绘制文字的时候，是有一个数组(8个元素)，由坐标得到角度，角度对应的区域对应于数组第几个元素

Answer 4

这是一个区域检测的问题，一楼的思路很正确。

大部分绘制图形的框架都采用类似的方法，将元素抽象成对象，然后，每个元素在绘制的时候都有zindex，x，y，width，height

当绑定了事件的canvas标签触发touch事件的时候，能拿到点击区域的坐标，此时遍历元素们，从层级高的找，当找到元素在该区域的时候，则说明你点击了该元素