イベント ハンドラーをキャンバス要素にアタッチし、図形のクリックを検出する方法

キャンバス要素へのイベント ハンドラーのアタッチ

キャンバス要素上に描画する場合、レンダリングされた形状にはピクセルを超えた固有の表現がありません。これは、クリック イベントを個々のシェイプに直接アタッチできないことを意味します。

解決策:

クリック ハンドラーをキャンバス要素に追加するには:

canvas.addEventListener('click', function() { /* Event handler code */ }, false);

キャンバス内のどの要素がクリックされたかを確認するには:

var canvas = document.getElementById('myCanvas');

// Get canvas offset and context
var canvasLeft = canvas.offsetLeft + canvas.clientLeft;
var canvasTop = canvas.offsetTop + canvas.clientTop;
var context = canvas.getContext('2d');

// Array to store element data
var elements = [];

// Add 'click' event listener to canvas
canvas.addEventListener('click', function(event) {
  // Calculate click coordinates relative to canvas
  var x = event.pageX - canvasLeft;
  var y = event.pageY - canvasTop;

  // Check for collision detection against elements
  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');
      // TODO: Additional actions (e.g., remove element, update canvas)
    }
  });

}, false);

失敗した試行:

• elem.onClick =alert("hello world");:alert() の戻り値を onClick プロパティに割り当て、アラートをすぐに表示します。
• elem.onClick = "alert('hello world!')"; : onClick プロパティに文字列を割り当てます。その結果、イベント処理は行われません。
• elem.onClick = function() { ... }: イベント処理の古風な方法を使用します。 、大文字と小文字が区別されます (onclick と onClick)。

以上がイベント ハンドラーをキャンバス要素にアタッチし、図形のクリックを検出する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。