onClick イベント ハンドラーを Canvas 要素に追加するにはどうすればよいですか?

Canvas 要素への onClick イベント ハンドラーの追加

Canvas 要素は、Web ページ上でグラフィックを描画および操作するための多用途かつ効率的な方法を提供します。ただし、キャンバス内の個々の図形や要素にイベント ハンドラーを追加するのは難しい場合があります。このガイドでは、onClick イベント ハンドラーをキャンバス要素にアタッチして、キャンバス内の特定の領域のクリックを検出できるようにするための包括的なソリューションを提供します。

キャンバス要素のイベント処理

従来の HTML とは異なります。要素、キャンバス要素には、操作できる特定の要素がありません。代わりに、別のアプローチを使用して、キャンバス上に描画された図形のクリック イベントをキャプチャする必要があります。

Canvas 要素のイベント リスナー

キャンバス上のクリック イベントを処理するには、 addEventListener メソッド:

canvas.addEventListener('click', function() { }, false);

このコードは、キャンバス上でクリックが発生するたびにコールバック関数をトリガーするイベント リスナーをキャンバス要素にアタッチします。

キャンバス内のクリックされた要素の検出

キャンバス上のどの図形または要素がクリックされたかを判断するには、いくつかの計算を実行する必要があります。

var elemLeft = elem.offsetLeft + elem.clientLeft;
var elemTop = elem.offsetTop + elem.clientTop;
var context = elem.getContext('2d');

これらの行は、ページ内のキャンバス要素のオフセットを計算し、2D 描画コンテキストを取得します。

要素情報に配列を使用する

キャンバス上に描画された各要素の位置と寸法を追跡するには、要素オブジェクトを格納する配列を作成します。

var elements = [];

それぞれ要素オブジェクトには、形状の色、幅、高さ、上部オフセット、および左オフセットが含まれている必要があります。

特定の形状のクリックの検出

クリック イベント コールバック関数内:

elem.addEventListener('click', function(event) {
    var x = event.pageX - elemLeft;
    var y = event.pageY - elemTop;

    // Collision detection between clicked offset and element
    elements.forEach(function(element) {
        if (y > element.top &amp;&amp; y < element.top + element.height
            &amp;&amp; x > element.left &amp;&amp; x < element.left + element.width) {
            alert('clicked an element');
        }
    });

}, false);

このコードはクリック座標を取得し、要素配列内の各要素をチェックして、クリックが形状の境界内で発生したかどうかを判断します。その場合、アラートがトリガーされます。

以前の試行のトラブルシューティング

次の理由により、以前の試行は機能しませんでした。

• アラートの戻り値を onClick に割り当てます
• エラーが発生する可能性があるため、' と " を交互に使用します。
• onClick プロパティに文字列を割り当て、イベントの添付を防ぎます。
• 使用古風な onclick プロパティ。大文字と小文字が区別されます。

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