クリック イベント ハンドラーをキャンバス要素に追加するにはどうすればよいですか?

キャンバス要素の OnClick イベント ハンドラー

キャンバス要素を操作する場合、描画されたオブジェクトにイベント ハンドラーを割り当てるのは難しい場合があります。他の HTML 要素とは異なり、キャンバス要素にはクリック イベントのネイティブ サポートがありません。

解決策: DOM イベントと数学

クリック イベント ハンドラーをキャンバスに追加するには要素を使用するには、次の 2 つのことを行う必要があります:

1. DOM イベント処理: addEventListener メソッドを使用して、キャンバス HTML 要素上のクリック イベントをキャプチャします。
2. 衝突検出: 数学的計算を使用して、マウスの位置に基づいてどの要素がクリックされたかを判断します。クリックすると、描画された要素の寸法が表示されます。

コードサンプル

これらの手順を実装するコード例を次に示します。

// Get the canvas element and its context
var elem = document.getElementById('myCanvas');
var context = elem.getContext('2d');

// Define an array to store element information
var elements = [];

// Add a click event listener to the canvas
elem.addEventListener('click', function(event) {
  // Calculate the mouse click position relative to the canvas
  var x = event.pageX - elem.offsetLeft;
  var y = event.pageY - elem.offsetTop;

  // Loop through the elements and check for collision
  elements.forEach(function(element) {
    if (y > element.top && y < element.top + element.height 
        && x > element.left && x < element.left + element.width) {
      alert('clicked an element');
    }
  });
});

// Add an element to the array
elements.push({
  colour: '#05EFFF',
  width: 150,
  height: 100,
  top: 20,
  left: 15
});

// Render the element
context.fillStyle = element.colour;
context.fillRect(element.left, element.top, element.width, element.height);

試行がうまくいかなかった理由

• elem.onClick =alert("hello world"); alert() の戻り値を onClick プロパティに割り当て、すぐにアラートをトリガーします。
• elem.onClick = "alert('hello world!')"; onClick プロパティに文字列を割り当てます。
• elem.onClick = function() {alert('hello world!'); };古風な onclick プロパティを使用し、大文字と小文字が区別されます。

以上がクリック イベント ハンドラーをキャンバス要素に追加するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。