JavaScriptでCanvas内でdrawImageした画像を押したときのイベントを発生させる

記事内にPRが含まれる場合があります

2022年6月17日2024年9月22日

URLをコピーしました！

なぜか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.