HTMLのcanvasタグをクリックしたときに関数を実行したいとき
今回はHTMLでcanvasタグをクリックしたときに関数を実行したいときどのようにすれば良いのかについてご紹介いたします。
HTMLのcanvasタグをクリックしたときに関数を実行したいとき
HTMLでcanvasタグで作られたイメージをクリックしたときに何かアクションを行いたいとします。
canvasタグではonclickが使えないので、私の場合は少し実装に手間取りました。
結論を言うと、addEventListenerを使ってcanvasタグの画像をクリックしたときに何か処理を走らせることが可能です。
例えば、下記のようなHTMLがあったとすると、
|
1 |
<canvas id="canvas"></canvas> |
下記のJavaScriptを用意することでやりたいことが実行可能です。
|
1 2 |
let canvas = document.getElementById('canvas') canvas.addEventListener('click', testMethod, false) |
終わりに
今回はHTMLでcanvasタグをクリックしたときに関数を実行したいときどのようにすれば良いのかについてご紹介いたしました。