Bonjour,
Je suis sous Firefox 3.6.12 sous Linux / Ubuntu 10.10. Sur un canvas HTML 5, les coordonnées du clic souris que je récupère semblent légèrement décalées par rapport au bout de la flèche qui représente le pointeur (le curseur) de ma souris. J'utilise le code ci-dessous qui dessine un point sur un canvas HTML 5 à l'endroit du clic. Le point ne se dessine pas au bout de la flèche mais légèrement en bas à droite sous la flèche.
Est-ce dû en fait que le curseur en forme de flèche fait plusieurs pixels de large et plusieurs pixels de haut et donc, l'endroit exact du clic par défaut est le milieu du carré que prend le curseur ? Si c'est le cas, comment faire en sorte de récupérer les coordonnées du bout de la flèche au moment du clic plutôt que celle du centre du curseur en forme de flèche ?
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37 <script type="text/javascript"> function init() { var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); canvas.width = 0.75 * screen.width; canvas.height = 0.75 * screen.height; } function mouseDownEventHandler(e) { drawPoint(e.clientX, e.clientY); } function drawPoint(x, y){ var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.arc(x,y,2,0,2*Math.PI,false); ctx.fill(); ctx.closePath(); } </script> <style type="text/css"> canvas { border: 1px solid black; } </style> </head> <body onload="init();"> <canvas id="canvas" width="300" height="300" onmousedown="mouseDownEventHandler(event);"> <p>This example requires a browser that supports the <a href="http://www.w3.org/html/wg/html5/">HTML5</a> <canvas> feature.</p> </canvas> </body>
Ou est-ce autre chose ?
Merci d'avance pour votre aide
Partager