Comment ajouter des gestionnaires d'événements de clic aux éléments du canevas ?

Gestionnaire d'événements OnClick pour les éléments de canevas

Lorsque vous travaillez avec des éléments de canevas, attribuer des gestionnaires d'événements aux objets dessinés peut être un défi. Contrairement aux autres éléments HTML, les éléments de canevas ne prennent pas en charge nativement les événements de clic.

La solution : événements DOM et mathématiques

Pour ajouter un gestionnaire d'événements de clic à un canevas élément, vous devrez faire deux choses :

1. Gestion des événements DOM : Capturer les événements de clic sur le canevas Élément HTML utilisant la méthode addEventListener.
2. Détection de collision : Utilisez des calculs mathématiques pour déterminer sur quel élément a été cliqué, en fonction de la position du clic de la souris et des dimensions des éléments dessinés.

Exemple de code

Voici un exemple de code qui les implémente étapes :

// Get the canvas element and its context
var elem = document.getElementById('myCanvas');
var context = elem.getContext('2d');

// Define an array to store element information
var elements = [];

// Add a click event listener to the canvas
elem.addEventListener('click', function(event) {
  // Calculate the mouse click position relative to the canvas
  var x = event.pageX - elem.offsetLeft;
  var y = event.pageY - elem.offsetTop;

  // Loop through the elements and check for collision
  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');
    }
  });
});

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

// Render the element
context.fillStyle = element.colour;
context.fillRect(element.left, element.top, element.width, element.height);

Pourquoi vos tentatives n'ont pas fonctionné

• elem.onClick = alert("hello world"); attribue la valeur de retour alert() à la propriété onClick, déclenchant immédiatement l'alerte.
• elem.onClick = "alert('hello world!')"; attribue une chaîne à la propriété onClick.
• elem.onClick = function() { alert('hello world!'); } ; utilise la propriété archaïque onclick et est sensible à la casse.

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!