html - html5でクリックする特定の領域を取得するにはどうすればよいですか？

Question

キャンバスを使って円を作り、それを線に分割しました。特定の領域の座標が必要です。特定の領域をクリックすると、それだけでクリックできるはずです。

円が異なる座標を持つ多くの領域に分割され、分割された領域内にいくつかの文字が配置されているワードホイールゲームの例を見てみましょう。「A」の文字が付いた特定の領域をクリックする場合は、「A」をクリックしてテキストボックスに表示する必要があります。

どうすればこれを達成できますか？

Answer 1

キャンバスを形成する要素は記憶されないため、インタラクティブではありません。キャンバスにコミットするとすぐに、それらは集合に含まれます。それらはDOM要素のような個々の要素ではありません。

回避策は、自分で物事の位置を覚えて、キャンバス要素へのクリックをリッスンし、クリックが何に到達したかを独自のロジックで解決することです。

これは重要です。Kineticのようなライブラリはそれを簡単にします。このようなAPIを使用すると、多くの時間を節約できます。たとえば、バニラJSよりもDOMにjQueryを使用する場合などです。