Comment ajouter un simple gestionnaire d'événement onClick à un élément de toile ?

Question

Comment ajouter un simple gestionnaire d'événement onClick à un élément de toile ?

Demandé el 26 de Mars, 2012: Quand la question a-t-elle été
34395 affichage: Nombre de visites la question a
3 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Je suis un programmeur Java expérimenté, mais je me penche pour la première fois depuis une dizaine d'années sur les technologies JavaScript/HTML5. Je suis complètement désemparé face à ce qui devrait être la chose la plus simple qui soit.

Par exemple, je voulais simplement dessiner quelque chose et y ajouter un gestionnaire d'événements. Je suis sûr que je fais quelque chose de stupide, mais j'ai cherché partout et rien de ce qui est suggéré (par exemple, la réponse à cette question : Ajouter la propriété onclick à une entrée avec JavaScript ) fonctionne. J'utilise Firefox 10.0.1. Mon code suit. Vous verrez plusieurs lignes commentées et, à la fin de chacune, une description de ce qui se passe (ou ne se passe pas).

Quelle est la syntaxe correcte ici ? Je suis en train de devenir fou !

<html>
<body>
    <canvas id="myCanvas" width="300" height="150"/>
    <script language="JavaScript">
        var elem = document.getElementById('myCanvas');
        // elem.onClick = alert("hello world");  - displays alert without clicking
        // elem.onClick = alert('hello world');  - displays alert without clicking
        // elem.onClick = "alert('hello world!')";  - does nothing, even with clicking
        // elem.onClick = function() { alert('hello world!'); };  - does nothing
        // elem.onClick = function() { alert("hello world!"); };  - does nothing
        var context = elem.getContext('2d');
        context.fillStyle = '#05EFFF';
        context.fillRect(0, 0, 150, 100);
    </script>

</body>

Demandé el 26 de Mars, 2012 par Jer

12 votes

Utilice onclick au lieu de onClick

Commenté el 27 de Mars, 2012 par mic

2 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 appelle alert() . Le reste ne fait rien à cause de la majuscule de onclick .

Commenté el 15 de Février, 2016 par LarsH

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 +

Commenté el 20 de Décembre, 2016 par Nikola Lukic

Answer 1

3 Réponses

Answer 2

1voto

Sergey Basharov Points 5256

Vous pouvez également placer des éléments DOM, comme div sur le dessus du canevas qui représenteraient vos éléments de canevas et seraient positionnés de la même manière.

Vous pouvez maintenant attacher des écouteurs d'événements à ces divs et exécuter les actions nécessaires.

Répondu el 31 de Mars, 2016 par Sergey Basharov (5256 Points )

Answer 3

1voto

TadLewis Points 141

Comme autre alternative bon marché sur un canevas quelque peu statique, l'utilisation d'un élément img superposé avec une définition de plan d'utilisation est rapide et sale. Cela fonctionne particulièrement bien sur les éléments de canevas basés sur des polygones, comme un diagramme circulaire.

Répondu el 11 de Avril, 2018 par TadLewis (141 Points )

Answer 4

0voto

Imran Bughio Points 3080

Réponse d'Alex est plutôt chouette, mais lorsqu'on utilise la rotation contextuelle, il peut être difficile de tracer les coordonnées x,y, donc j'ai créé un Démo montrant comment en garder la trace.

En fait, j'utilise cette fonction et je lui donne l'angle et la distance parcourue dans cet ange avant de dessiner l'objet.

function rotCor(angle, length){
    var cos = Math.cos(angle);
    var sin = Math.sin(angle);

    var newx = length*cos;
    var newy = length*sin;

    return {
        x : newx,
        y : newy
    };
}

Répondu el 24 de Janvier, 2017 par Imran Bughio (3080 Points )

Comment ajouter un simple gestionnaire d'événement onClick à un élément de toile ?

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Comment ajouter un simple gestionnaire d'événement onClick à un élément de toile ?

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: