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

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

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

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!