<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script language="javascript">
function main(){
var canvas = document.getElementById("canvas");
canvas.addEventListener("mousemove", function(e){
if (!e) e = window.event;
var ctx = canvas.getContext("2d");
var x = e.offsetX;
var y = e.offsetY;
ctx.fillRect(x, y, 1, 1);
});
}
</script>
</head>
<body onload="main();">
<div style="width: 800px; height: 600px; -webkit-transform: scale(0.75,0.75); -moz-transform: scale(0.75,0.75)">
<canvas id="canvas" width="400px" height="400px" style="background-color: #cccccc;"></canvas>
</div>
</body>
</html>
Veuillez considérer ce qui précède rapide et sale exemple. Merci de noter que ma toile est contenue par un div ayant une transformation d'échelle appliqué. Le code ci-dessus fonctionne parfaitement sur n'importe quel navigateur basé sur webkit. Tout en déplaçant la souris, elle attire les points sur la toile. Malheureusement, il n'est pas dans Firefox comme son modèle d'événement ne prend pas en charge la offsetX / Y des propriétés. Comment puis-je transformer les coordonnées de la souris à partir de (peut-être) de l'événement.clientX (qui est pris en charge dans firefox aussi) en toile coordonnées relatives tenant compte de toile de position, de transformer, etc? Merci, Luca.
