Lorsque vous tirez sur un canvas vous dessinez simplement un bitmap dans l'élément mode immédiat .
Le site éléments (formes, lignes, images) qui sont dessinées n'ont pas de représentation autre que les pixels qu'elles utilisent et leur couleur.
Par conséquent, pour obtenir un cliquez sur sur un canvas élément (forme), vous devez capturer les événements de clic sur l'icône canvas HTML et utiliser des calculs pour déterminer l'élément sur lequel on a cliqué, à condition de stocker la largeur/hauteur et le décalage x/y des éléments.
Pour ajouter un click à votre canvas élément, utiliser...
canvas.addEventListener('click', function() { }, false);
Pour déterminer quels é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 à l'événement canvas puis pousse une forme (appelée élément element dans mon code) à un elements réseau. Vous pouvez en ajouter autant que vous le souhaitez ici.
La création d'un tableau d'objets a pour but de nous permettre d'interroger leurs propriétés ultérieurement. Une fois que tous les éléments ont été placés dans le tableau, nous bouclons et rendons chacun d'entre eux en fonction de leurs propriétés.
Lorsque le click est déclenché, le code passe en boucle les éléments et détermine si le clic a été effectué sur l'un des éléments de l'élément elements tableau. Si c'est le cas, il déclenche un alert() qui pourrait facilement être modifié pour faire quelque chose comme supprimer l'élément du tableau, auquel cas vous auriez besoin d'un fichier séparé Rendu pour mettre à jour le canvas .
Pour être complet, pourquoi vos tentatives n'ont pas fonctionné...
elem.onClick = alert("hello world"); // displays alert without clicking
Cela revient à assigner la valeur de retour de alert() à la onClick propriété de elem . Il invoque immédiatement le alert() .
elem.onClick = alert('hello world'); // displays alert without clicking
En JavaScript, le ' y " sont sémantiquement identiques, le lexeur utilise probablement ['"] pour les citations.
elem.onClick = "alert('hello world!')"; // does nothing, even with clicking
Vous attribuez une chaîne de caractères à l'élément onClick propriété de elem .
elem.onClick = function() { alert('hello world!'); }; // does nothing
JavaScript est sensible à la casse. Le site onclick est la méthode archaïque pour attacher des gestionnaires d'événements. Elle ne permet de joindre qu'un seul événement à 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, ' === " .
12 votes
Utilice
onclickau lieu deonClick2 votes
Pour expliquer pourquoi ces tentatives n'ont pas fonctionné... Les deux premiers commentaires affichent immédiatement une alerte parce que vous appelez
alert()directement dans<script>au lieu de définir une fonction qui appellealert(). Le reste ne fait rien à cause de la majuscule deonclick.0 votes
Vous pouvez utiliser cette librairie jsfiddle.net/user/zlatnaspirala/fiddles , regarde bitbucket.org/nikola_l/visual-js . Vous obtiendrez de nombreuses fonctionnalités +