J'étudie JQuery et HTML5 Toivas. Tout ce que je veux faire est un exemple de dessin HTML5 simple. Lorsque la souris se déplace, je dessine des carrés rouges sous ma souris.
Mon code est simple, mais j'ai un problème d'obtenir la position du curseur de la souris dans la toile. P>
en ce moment, j'utilise x = événement.OffSetX; pour obtenir la position de la souris. Cela fonctionne très bien en Chrome, cependant, quand il s'agit de Firefox, cela ne fonctionne pas. J'ai changé le code en x = événement.layerx. Mais il semble que la couche de couche est la position de ma souris par rapport à la page Web, pas la position de la toile. Parce que je vois toujours un décalage. P>
J'ai deux questions, d'abord, quelle est la bonne chose à faire pour obtenir la position correcte de la souris sous Firefox. Deuxièmement, comment puis-je écrire un code qui fonctionne pour IE, Firefox, Chrome, Safari et Opera? P>
Voici mon code: P>
<!doctype html />
<html><head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(
function(){
var flip = document.getElementById('flip');
var context = flip.getContext('2d');
context.fillStyle = "rgb(255,255,255)";
context.fillRect(0, 0, 500, 500);
$("a").click(function(event){alert("Thanks for visiting!");});
$("#flip").mousemove(function(event){
var x, y;
x = event.layerX;
y = event.layerY;
//alert("mouse pos"+event.layerX );
var flip = document.getElementById('flip');
var context = flip.getContext('2d');
context.fillStyle = "rgb(255,0,0)";
context.fillRect(x, y, 5, 5);
}
);
}
);
</script>
</head> <body bgcolor="#000000"> <a href="http://jquery.com/">jQuery</a><canvas id="flip" width="500" height="500">
This text is displayed if your browser does not support HTML5 Canvas.</canvas> </body></html>
3 Réponses :
Vous n'avez pas à S'inquiéter de la compatibilité, seuls IE (avant 9) ne prend pas en charge la toile de manière nativement. 
Cette réponse résout le problème, mais elle étend imprime le DOM et réinvente la roue.
n'est pas valide et invoque le mode Qiiks, ce qui modifie le comportement de beaucoup de choses DOM! est la bonne DTD.
Votre fonction de gauche se brise si la fenêtre n'est pas défilée.
Vous aurez besoin d'une fonction personnalisée pour déterminer où se trouve l'élément, puis de déterminer où la souris est dans cet élément. Voici un exemple . Il utilise cette fonction de Quirks Mode et ma bibliothèque JavaScript qui ne doit pas être difficile à traduire en jQuery.
function findPos(obj) {
var curleft = curtop = 0;
if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
return [curleft, curtop];
}
}
Je vois beaucoup de questions sur ce sujet et tous proposer de parcourir DOM ou d'utiliser OffsetX et OffSety, qui ne sont pas toujours définis correctement.
Vous devez utiliser la fonction: Canvas.getboundingClientRect () à partir de l'API de Canvas. < / p>
C'est une belle solution, mais cela ne fonctionnera pas si la toile est styled avec des frontières ou des pompiers ...
GetBoundingClientRect () Donnez un rectangle de boîte à bordure, mais c'est la seule solution que j'ai trouvée que la poignée de la position de la position et du défilement de la même manière. Avec cette solution, vous devrez utiliser du code laid comme: parseint (canvas.style.borderleftwidth.substring (-2) Mon conseil: Ajouter un rembourrage et une frontière sur un parent div.
n'est pas valide et invoque le mode Qiiks, ce qui modifie le comportement de beaucoup de choses DOM!est la bonne DTD.