Wie füge ich Click-Event-Handler zu Canvas-Elementen hinzu?

OnClick-Ereignishandler für Canvas-Elemente

Bei der Arbeit mit Canvas-Elementen kann die Zuweisung von Ereignishandlern zu gezeichneten Objekten eine Herausforderung sein. Im Gegensatz zu anderen HTML-Elementen verfügen Canvas-Elemente nicht über native Unterstützung für Klickereignisse.

Die Lösung: DOM-Ereignisse und Mathematik

So fügen Sie einem Canvas einen Klickereignishandler hinzu Element müssen Sie zwei Dinge tun:

1. DOM-Ereignisbehandlung: Erfassen Sie Klickereignisse auf dem Canvas-HTML-Element mit der Methode addEventListener.
2. Kollisionserkennung:Bestimmen Sie mithilfe mathematischer Berechnungen, auf welches Element geklickt wurde, basierend auf der Position des Mausklicks und den Abmessungen der gezeichneten Elemente.

Codebeispiel

Hier ist ein Beispielcode, der diese Schritte implementiert:

// 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);

Warum Ihre Versuche nicht funktionierten

• elem.onClick = alarm("Hallo Welt"); weist der onClick-Eigenschaft den Rückgabewert „alert()“ zu und löst so sofort die Warnung aus.
• elem.onClick = "alert('hello world!')"; weist der onClick-Eigenschaft eine Zeichenfolge zu.
• elem.onClick = function() { warning('hello world!'); }; verwendet die veraltete onclick-Eigenschaft und unterscheidet zwischen Groß- und Kleinschreibung.

Das obige ist der detaillierte Inhalt vonWie füge ich Click-Event-Handler zu Canvas-Elementen hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!