Comment ajouter un gestionnaire d'événements onClick à un élément Canvas en JavaScript ?

Comment attacher un événement onClick à un élément Canvas

Introduction :

Éléments Canvas fournissent un moyen puissant de dessiner et de manipuler des graphiques sur une page Web. Cependant, l'ajout de gestionnaires d'événements aux éléments du canevas peut être délicat pour les débutants. Cet article montrera comment ajouter un simple gestionnaire d'événements onClick à un élément canevas.

Problème :

Un développeur Java expérimenté rencontre des difficultés pour ajouter un gestionnaire d'événements onClick à un élément de canevas en JavaScript. Plusieurs tentatives ont échoué, notamment l'utilisation de la propriété onclick, l'attribution de fonctions et la définition de la propriété sur une chaîne.

Solution :

Lorsque vous dessinez sur un élément de canevas, le les éléments eux-mêmes n'ont aucune représentation autre que leurs pixels et leur couleur. Par conséquent, pour détecter les clics sur un élément, vous devez capturer les événements de clic sur l'élément HTML du canevas et utiliser des calculs mathématiques pour déterminer sur quel élément a été cliqué.

Pour ajouter un événement de clic à un élément du canevas, utilisez la commande suivante syntaxe :

canvas.addEventListener('click', function() { }, false);

Pour déterminer l'élément cliqué, utilisez le code suivant :

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

Explication :

Ce code attache un clic événement à l’élément canevas et ajoute un seul élément à un tableau d’éléments. Le code parcourt les éléments, compare les coordonnées du clic aux coordonnées de l'élément et alerte si un clic se produit sur un élément.

Raisons des tentatives infructueuses :

• L'attribution de la valeur de retour de alert() à la propriété onClick a immédiatement invoqué la fonction alert().
• L'affectation de chaîne à la propriété onClick n'a pas attaché de gestionnaire d'événements.
• Utilisation de l'archaïque La propriété onclick est sensible à la casse et peut être perdue lors de la sérialisation.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!