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

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

Mary-Kate Olsen

リリース： 2024-11-12 22:14:02

オリジナル

904 人が閲覧しました

How to Attach Event Handlers to Canvas Elements and Detect Clicks on Shapes?

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

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

解決策:

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

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 サイトの他の関連記事を参照してください。