Lorsque vous dessinez sur un canvasélément, vous dessinez simplement une image bitmap en mode immédiat .
Les éléments (formes, lignes, images) qui sont dessinés n'ont aucune représentation en dehors des pixels qu'ils utilisent et de leur couleur.
Par conséquent, pour obtenir un événement de clic sur un canvas élément (forme), vous devez capturer les événements de clic sur l' canvasélément HTML et utiliser des mathématiques pour déterminer quel élément a été cliqué, à condition que vous stockiez la largeur / hauteur et le décalage x / y des éléments. .
Pour ajouter un clickévénement à votre canvasélément, utilisez ...
canvas.addEventListener('click', function() { }, false);
Pour déterminer quel élément a été cliqué ...
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);
});
jsFiddle .
Ce code attache un clickévénement à l' canvasélément, puis pousse une forme (appelée an elementdans mon code) dans un elementstableau. Vous pouvez en ajouter autant que vous le souhaitez ici.
Le but de la création d'un tableau d'objets est que nous puissions interroger leurs propriétés plus tard. Une fois que tous les éléments ont été poussés sur le tableau, nous bouclons et rendons chacun d'eux en fonction de leurs propriétés.
Lorsque l' clickévénement est déclenché, le code parcourt les éléments et détermine si le clic était sur l'un des éléments du elementstableau. Si tel est le cas, il déclenche un alert(), qui pourrait facilement être modifié pour faire quelque chose comme supprimer l'élément de tableau, auquel cas vous auriez besoin d'une fonction de rendu distincte pour mettre à jour le canvas.
Par souci d'exhaustivité, pourquoi vos tentatives n'ont pas fonctionné ...
elem.onClick = alert("hello world"); // displays alert without clicking
Il s'agit d'attribuer la valeur de retour de alert()à la onClickpropriété de elem. Il appelle immédiatement le alert().
elem.onClick = alert('hello world'); // displays alert without clicking
En JavaScript, les 'et "sont sémantiquement identiques, le lexer utilise probablement ['"]pour les guillemets.
elem.onClick = "alert('hello world!')"; // does nothing, even with clicking
Vous affectez une chaîne à la onClickpropriété de elem.
elem.onClick = function() { alert('hello world!'); }; // does nothing
JavaScript est sensible à la casse. La onclickpropriété est la méthode archaïque d'attachement de gestionnaires d'événements. Il n'autorise qu'un seul événement à être associé à la propriété et l'événement peut être perdu lors de la sérialisation du HTML.
elem.onClick = function() { alert("hello world!"); }; // does nothing
Encore une fois, ' === ".
onclickplace deonClick