なぜかcanvasに画像を描画してそれをaddEventListnerしてもイベントが取れないので色々試したときの備忘録。
画像タグにonclick属性でメソッドを設定する方法はOK
HTML側で画像を用意して、onclick属性にpushed()というメソッドを入れておく。
<img id="btn" src="http://pg-happy.jp/wp-content/uploads/2022/06/btn-spin1.png" onclick="pushed()">
JavaScript側ではpushed()メソッドを実装すればよい。
function pushed(e) { window.alert("pushed!"); }
全文はこちら。
See the Pen
img-click-event-test1 by pghappy (@pghappy)
on CodePen.
getElementByIdした画像オブジェクトにaddEventListenerを設定する方法でもOK
bodyの読み込み時にonload属性にメソッドxyzを用意しておく。
imgタグのidにbtnを設定する。
<body onload="xyz()"> <img id="btn" src="http://pg-happy.jp/wp-content/uploads/2022/06/btn-spin1.png" > </body>
JavaScript側ではxyzメソッド内で、idがbtnであるオブジェクトを生成して。addEventListenerでイベントのタイプと、その時に起動させるpushedメソッドを指定。
function xyz(){ var btn = document.getElementById("btn"); btn.addEventListener('click', pushed); } function pushed(e) { window.alert("pushed!"); }
全体像はこちら。これでもちゃんと画像ボタンを押すイベントが作れた。
See the Pen
img-click-event-test2 by pghappy (@pghappy)
on CodePen.
getElementByIdした画像オブジェクトのonclickプロパティに設定してもOK
HTMLは先ほどと同様。
<body onload="xyz()"> <img id="btn" src="http://pg-happy.jp/wp-content/uploads/2022/06/btn-spin1.png" > </body>
JavaScript側はbtn.onclickプロパティにメソッドhogeを指定する方法でもできた。
function xyz(){ var btn = document.getElementById("btn"); btn.onclick = hoge; } function hoge(e) { window.alert("pushed!"); }
全文はこちら。
See the Pen
img-click-event-test3 by pghappy (@pghappy)
on CodePen.
canvasにdrawImageした画像のクリックイベントを取ることが出来ない
ここまでやってきた様なやり方でcanvasにボタンを描画するとクリックイベントが取れないことが分かった。
HTML側にはcanvasをid=aaaで500ピクセルサイズで作成。
ボタン画像はstyle=”display:none;”にしてHTML表示上は消しておく。
<body onload="xyz()"> <canvas id="aaa" width="500" height="500"></canvas> <img id="btn" src="http://pg-happy.jp/wp-content/uploads/2022/06/btn-spin1.png" style="display:none;"> </body>
JavaScript側は以下のようにした。canvasを取得、ctxを取得、btnを取得、そしてctx.drawImageを使ってbtnを(100,100)の座標から80ピクセルサイズで描画。
var canvas, ctx, btn; function xyz(){ canvas = document.getElementById("aaa"); ctx = canvas.getContext("2d"); btn = document.getElementById("btn"); ctx.drawImage(btn, 100, 100, 80, 80);
ここまででボタン画像の描画はうまくいった。
このあと。
btnのaddEventListenerを設定してもダメ。
//addEventListenerじゃ動かない btn.addEventListener('click', hoge);
btnのonclickプロパティを設定してもダメ。
//onclickじゃ動かない btn.onclick = hoge;
動かないコードの全体はこちら。
See the Pen
img-click-event-test4 by pghappy (@pghappy)
on CodePen.
解決策。
canvasにdrawImageした画像のクリックイベントを取るには座標を使う
HTML側は変わらない。
<body onload="xyz()"> <canvas id="aaa" width="500" height="500"></canvas> <img id="btn" src="http://pg-happy.jp/wp-content/uploads/2022/06/btn-spin1.png" style="display:none;"> </body>
JavaScript側はまずcanvasにaddEventListenerを設定する。
canvas.addEventListener("click", hoge);
canvasがクリックされたらhogeメソッドが動く。その中でクリックされた座標をとって、ボタン上にあるか判定することでボタンがクリックされたら‥の処理をする。
function hoge(e) { //クリックされた場所の座標をcanvas内座標に変換offsetX, offsetYでもいいかもしれない var rect = canvas.getBoundingClientRect(); var point = { x: e.clientX - rect.left, y: e.clientY - rect.top }; //クリックした座標が画像の上にあるか判定(丸いボタンなので四隅は無いけどクリックしたことにする) var hit = (btnSize.x <= point.x && point.x <= btnSize.x + btnSize.w) && (btnSize.y <= point.y && point.y <= btnSize.y + btnSize.h) if (hit) { window.alert('pushed!'); } }
全文はこちら。
See the Pen
img-click-event-test5 by pghappy (@pghappy)
on CodePen.