Bagaimana untuk Menyerlahkan Kawasan Peta Imej dengan Garis Kanvas?

1. Buat elemen kanvas. Elemen ini akan digunakan untuk melukis garis besar kawasan apabila ia dilegarkan.
2. Letakkan elemen kanvas di hadapan peta imej.
3. Dapatkan konteks peranti kanvas. Konteks ini akan digunakan untuk melukis garis besar.
4. Tambahkan pendengar acara pada kawasan. Pendengar acara ini akan memanggil fungsi untuk melukis garis besar apabila kawasan itu dilegarkan.
5. Dalam fungsi pendengar acara, gunakan atribut coords kawasan untuk mendapatkan koordinat bentuk.
6. Gunakan kaedah getContext() kanvas untuk mendapatkan lukisan kanvas konteks.
7. Gunakan kaedah beginPath() konteks lukisan untuk memulakan laluan baharu.
8. Gunakan kaedah moveTo() bagi konteks lukisan untuk mengalihkan titik semasa ke koordinat pertama bentuk.
9. Gunakan lineTo() kaedah konteks lukisan untuk melukis garisan kepada setiap koordinat bentuk yang lain.
10. Gunakan kaedah closePath() konteks lukisan untuk menutup laluan.
11. Gunakan kaedah lejang() konteks lukisan untuk membelah laluan, yang akan melukis garis besar bentuk.

Berikut ialah contoh cara melaksanakan penyelesaian ini dalam 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);
  });
}

Atas ialah kandungan terperinci Bagaimana untuk Menyerlahkan Kawasan Peta Imej dengan Garis Kanvas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!