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 bestimmen, verwenden Sie Folgendes 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 ein Klickereignis an das Canvas-Element an 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() aufgerufen sofort.
• Die Zeichenfolgenzuweisung an die onClick-Eigenschaft hat keinen Ereignishandler angehängt.
• Bei der Verwendung der veralteten onclick-Eigenschaft wird die Groß-/Kleinschreibung beachtet und kann bei 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!