Comment mettre en surbrillance les zones de la carte-image avec les contours du canevas ?

1. Créer un élément de toile. Cet élément servira à dessiner les contours des zones lors de leur survol.
2. Positionnez l'élément canevas devant la carte-image.
3. Obtenez le contexte de l'appareil du canevas. Ce contexte servira à dessiner les contours.
4. Ajouter des auditeurs d'événements aux zones. Ces écouteurs d'événements appelleront des fonctions pour dessiner les contours lorsque les zones sont survolées.
5. Dans les fonctions d'écoute d'événements, utilisez l'attribut coords de la zone pour obtenir les coordonnées de la forme.
6. Utilisez la méthode getContext() du canevas pour obtenir le dessin du canevas contexte.
7. Utilisez la méthode beginPath() du contexte de dessin pour démarrer un nouveau chemin.
8. Utilisez la méthode moveTo() du contexte de dessin pour déplacer le point actuel vers la première coordonnée de la forme.
9. Utilisez la méthode lineTo() du contexte de dessin pour tracer une ligne vers chacune des autres coordonnées de la forme.
10. Utilisez la méthode closePath() du contexte de dessin pour fermer le chemin.
11. Utilisez la méthode Stroke() du contexte de dessin pour tracer le chemin, ce qui dessinera le contour de la forme.

Voici un exemple de la façon d'implémenter cette solution en 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);
  });
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!