HTMLのcanvasタグをクリックしたときに関数を実行したいとき

今回はHTMLでcanvasタグをクリックしたときに関数を実行したいときどのようにすれば良いのかについてご紹介いたします。



HTMLのcanvasタグをクリックしたときに関数を実行したいとき

HTMLでcanvasタグで作られたイメージをクリックしたときに何かアクションを行いたいとします。

canvasタグではonclickが使えないので、私の場合は少し実装に手間取りました。

結論を言うと、addEventListenerを使ってcanvasタグの画像をクリックしたときに何か処理を走らせることが可能です。

例えば、下記のようなHTMLがあったとすると、

下記のJavaScriptを用意することでやりたいことが実行可能です。

終わりに

今回はHTMLでcanvasタグをクリックしたときに関数を実行したいときどのようにすれば良いのかについてご紹介いたしました。

最後までお読みいただきありがとうございます。
ブログやTwitterでのシェアOKです。
コメントもお待ちしております。
誤植や勘違いなどございましたらコメント欄にて教えていただけると幸いです。

Youtubeチャンネル開設いたしました。
よろしければチャンネル登録お願いいたします。
https://www.youtube.com/channel/UC219XhmSRxmXltTy6COxSMw






HTML/CSS

Posted by ちこ