Wie füge ich Event-Handler an Canvas-Elemente an und erkenne Klicks auf Formen?

Ereignishandler an Canvas-Elemente anhängen

Beim Zeichnen auf einem Canvas-Element fehlt den gerenderten Formen eine inhärente Darstellung über ihre Pixel hinaus. Dies bedeutet, dass Klickereignisse nicht direkt an einzelne Formen angehängt werden können.

Lösung:

So fügen Sie einem Canvas-Element einen Klickhandler hinzu:

canvas.addEventListener('click', function() { /* Event handler code */ }, false);

So ermitteln Sie, auf welches Element im Canvas geklickt wurde:

var canvas = document.getElementById('myCanvas');

// Get canvas offset and context
var canvasLeft = canvas.offsetLeft + canvas.clientLeft;
var canvasTop = canvas.offsetTop + canvas.clientTop;
var context = canvas.getContext('2d');

// Array to store element data
var elements = [];

// Add 'click' event listener to canvas
canvas.addEventListener('click', function(event) {
  // Calculate click coordinates relative to canvas
  var x = event.pageX - canvasLeft;
  var y = event.pageY - canvasTop;

  // Check for collision detection against elements
  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');
      // TODO: Additional actions (e.g., remove element, update canvas)
    }
  });

}, false);

Fehlgeschlagen Versuche:

• elem.onClick = alarm("hello world");: Weist den Rückgabewert von warning() der onClick-Eigenschaft zu und zeigt die Warnung sofort an .
• elem.onClick = "alert('hello world!')";: Weist der onClick-Eigenschaft eine Zeichenfolge zu, was zu keiner Ereignisbehandlung führt.
• elem.onClick = function() { ... }: Verwendet die veraltete Methode der Ereignisbehandlung, nämlich die Groß-/Kleinschreibung -sensitiv (onclick vs. onClick).

Das obige ist der detaillierte Inhalt vonWie füge ich Event-Handler an Canvas-Elemente an und erkenne Klicks auf Formen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!