キャンバスのアウトラインを使用してイメージ マップ領域を強調表示する方法

1. キャンバス要素を作成します。この要素は、領域にマウスを置いたときに領域の輪郭を描画するために使用されます。
2. キャンバス要素をイメージ マップの前に配置します。
3. キャンバスのデバイスコンテキストを取得します。このコンテキストは、アウトラインを描画するために使用されます。
4. エリアにイベント リスナーを追加します。これらのイベント リスナーは、領域にカーソルを置いたときに輪郭を描画する関数を呼び出します。
5. イベント リスナー関数 では、領域の coords 属性を使用して形状の座標を取得します。
6. キャンバスの getContext() メソッドを使用して、キャンバスの描画を取得しますcontext.
7. 描画コンテキストの beginPath() メソッドを使用して、新しいパスを開始します。
8. 描画コンテキストの moveTo() メソッドを使用します。描画コンテキストを使用して、現在のポイントをシェイプの最初の座標に移動します。
9. lineTo() を使用します。描画コンテキストのメソッドを使用して、シェイプの他の各座標に線を描画します。
10. パスを閉じるには、描画コンテキストの closePath() メソッドを使用します。
11. 描画コンテキストの stroke() メソッド を使用してパスをストロークし、輪郭を描画します。形状。

JavaScript でこのソリューションを実装する方法の例を次に示します。

// Canvas element
var canvas = document.getElementById('myCanvas');
// Drawing context
var hdc = canvas.getContext('2d');

// Event listeners
for (var i = 0; i < areas.length; i++) {
  areas[i].addEventListener('mouseover', function() {
    var coords = this.getAttribute('coords');
    hdc.beginPath();
    hdc.moveTo(coords[0], coords[1]);
    for (var j = 2; j < coords.length; j += 2) {
      hdc.lineTo(coords[j], coords[j+1]);
    }
    hdc.lineTo(coords[0], coords[1]);
    hdc.stroke();
  });
  areas[i].addEventListener('mouseout', function() {
    hdc.clearRect(0, 0, canvas.width, canvas.height);
  });
}

以上がキャンバスのアウトラインを使用してイメージ マップ領域を強調表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。