JavaScript で onClick イベント ハンドラーを Canvas 要素に追加する方法

キャンバス要素に onClick イベントをアタッチする方法

概要:

キャンバス要素Web ページ上でグラフィックを描画および操作するための強力な方法を提供します。ただし、キャンバス要素にイベント ハンドラーを追加するのは、初心者にとっては難しい場合があります。この記事では、単純な onClick イベント ハンドラをキャンバス要素に追加する方法を説明します。

問題:

経験豊富な Java 開発者が、onClick イベント ハンドラをキャンバス要素に追加するのに苦労しています。 JavaScript の Canvas 要素。 onclick プロパティの使用、関数の割り当て、プロパティの文字列への設定など、複数の試行が失敗しました。

解決策:

キャンバス要素に描画するとき、要素自体は、ピクセルと色以外の表現を持ちません。したがって、要素のクリックを検出するには、キャンバス HTML 要素のクリック イベントをキャプチャし、数学的計算を使用してどの要素がクリックされたかを判断する必要があります。

キャンバス要素にクリック イベントを追加するには、次のコマンドを使用します。構文:

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

クリックされた要素を特定するには、次のコードを使用します:

var elem = document.getElementById('myCanvas'),
    elemLeft = elem.offsetLeft + elem.clientLeft,
    elemTop = elem.offsetTop + elem.clientTop,
    context = elem.getContext('2d'),
    elements = [];

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

    // Collision detection between clicked offset and element.
    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');
        }
    });

}, false);

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

// Render elements.
elements.forEach(function(element) {
    context.fillStyle = element.colour;
    context.fillRect(element.left, element.top, element.width, element.height);
});

説明:

このコードはクリックを付加します。イベントを Canvas 要素に追加し、単一の要素を要素の配列に追加します。コードは要素をループし、クリック座標と要素座標を比較し、要素上でクリックが発生すると警告を発します。

試行失敗の理由:

• alert() の戻り値を onClick プロパティに割り当てると、alert() 関数がすぐに呼び出されます。
• onClick プロパティへの文字列の割り当てでは、イベント ハンドラーが付加されませんでした。
• 古いメソッドを使用するonclick プロパティは大文字と小文字が区別され、シリアル化中に失われる可能性があります。

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