Heim > Web-Frontend > js-Tutorial > Hauptteil

Wie füge ich einen onClick-Ereignishandler zu einem Canvas-Element in JavaScript hinzu?

Barbara Streisand
Freigeben: 2024-11-14 12:30:02
Original
853 Leute haben es durchsucht

How to Add an onClick Event Handler to a Canvas Element in JavaScript?

So hängen Sie ein onClick-Ereignis an ein Canvas-Element an

Einführung:

Canvas-Elemente bieten eine leistungsstarke Möglichkeit, Grafiken auf einer Webseite zu zeichnen und zu bearbeiten. Allerdings kann das Hinzufügen von Event-Handlern zu Canvas-Elementen für Anfänger schwierig sein. In diesem Artikel wird gezeigt, wie man einem Canvas-Element einen einfachen onClick-Ereignishandler hinzufügt.

Problem:

Ein erfahrener Java-Entwickler hat Schwierigkeiten, einen onClick-Ereignishandler hinzuzufügen ein Canvas-Element in JavaScript. Mehrere Versuche sind fehlgeschlagen, einschließlich der Verwendung der onclick-Eigenschaft, der Zuweisung von Funktionen und der Festlegung der Eigenschaft auf eine Zeichenfolge.

Lösung:

Beim Zeichnen auf einem Canvas-Element wird die Elemente selbst haben außer ihren Pixeln und ihrer Farbe keine Darstellung. Um Klicks auf ein Element zu erkennen, müssen Sie daher Klickereignisse auf dem Canvas-HTML-Element erfassen und mithilfe mathematischer Berechnungen ermitteln, auf welches Element geklickt wurde.

Um einem Canvas-Element ein Klickereignis hinzuzufügen, verwenden Sie Folgendes Syntax:

canvas.addEventListener('click', function() { }, false);
Nach dem Login kopieren

Um das angeklickte Element zu ermitteln, verwenden Sie den folgenden Code:

var elem = document.getElementById('myCanvas'),
    elemLeft = elem.offsetLeft + elem.clientLeft,
    elemTop = elem.offsetTop + elem.clientTop,
    context = elem.getContext('2d'),
    elements = [];

// Add event listener for 'click' events.
elem.addEventListener('click', function(event) {
    var x = event.pageX - elemLeft,
        y = event.pageY - elemTop;

    // Collision detection between clicked offset and element.
    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');
        }
    });

}, false);

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

// Render elements.
elements.forEach(function(element) {
    context.fillStyle = element.colour;
    context.fillRect(element.left, element.top, element.width, element.height);
});
Nach dem Login kopieren

Erklärung:

Dieser Code fügt einen Klick hinzu Ereignis zum Canvas-Element und fügt ein einzelnes Element zu einem Array von Elementen hinzu. Der Code durchläuft die Elemente in einer Schleife, vergleicht die Klickkoordinaten mit den Elementkoordinaten und warnt, wenn ein Klick auf ein Element erfolgt.

Gründe für fehlgeschlagene Versuche:

  • Durch die Zuweisung des Rückgabewerts von „alert()“ zur Eigenschaft „onClick“ wurde die Funktion „alert()“ sofort aufgerufen.
  • Die Zuweisung einer Zeichenfolge zur Eigenschaft „onClick“ hat keinen Ereignishandler angehängt.
  • Verwendung des veralteten Die onclick-Eigenschaft unterscheidet zwischen Groß- und Kleinschreibung und kann während der Serialisierung verloren gehen.

Das obige ist der detaillierte Inhalt vonWie füge ich einen onClick-Ereignishandler zu einem Canvas-Element in JavaScript hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage