Je suis en train d'essayer de le faire lorsque vous cliquez sur une toile, il y a un cercle sur la souris de la souris. Lorsque je clique sur la toile, le cercle apparaît peut-être 300 pixels à bas.
J'ai essayé de passer de pagesX / Y, clientX / Y et scripx / y. P>
<canvas id="canvas" class="canvas" width="300px" height="200px" style="border: 1px solid #000; Padding-bottom: 100px;">
</canvas>
<script>
window.onload = function()
{
var canvas = document.getElementById("canvas");
addEventListener("mousedown", drawCircle)
}
function drawCircle(event)
{
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
x = event.pageX
y = event.pageY
ctx.fillStyle = "red";
ctx.beginPath();
ctx.arc(x, y, 50, 0, 2 * Math.PI);
ctx.stroke();
ctx.fill()
}
</script>
3 Réponses :
éventuellement être compensé par d'autres éléments de la page autour de la toile. Essayez quelque chose comme ceci pour obtenir x / y par rapport à toile:
p>
<canvas id="canvas" class="canvas"></canvas>
<script>
window.onload = function () {
var canvas = document.getElementById("canvas");
canvas.width = 300;
canvas.height = 200;
addEventListener("mousedown", drawCircle)
}
function drawCircle(event) {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var rect = canvas.getBoundingClientRect();
x = (event.clientX - rect.left)
y = (event.clientY - rect.top)
//x = event.pageX
//y = event.pageY
ctx.fillStyle = "red";
ctx.beginPath();
ctx.arc(x, y, 50, 0, 2 * Math.PI);
ctx.stroke();
ctx.fill()
}
</script>
Utilisation de OffsetX ou OffSty Est-ce que ce calcul pour vous de manière native.
OffsetX / Y Probablement meilleur et plus propre mais vous devrez changer le MouseDown EventListener pour être sur la toile spécifiquement, plutôt que tout le document.
https://jsfiddle.net/1z5modk2/1/
au lieu d'utiliser https://developer.mozilla.org/fr/fr -Us / Docs / Web / API / MouseEvent / OffsetX pageX et pages , utilisez offsetx et offSety
Vous devez rendre compte de la position de la toile elle-même. Il semble que votre code suppose que la toile est toujours en haut à gauche de l'écran.
Il existe également des problèmes avec votre élément de toile. La largeur et la hauteur doivent être des chiffres (pas de "px" requis). Le rembourrage inférieur fait la moitié inférieure de la toile inaccessible. P>
p>
<canvas id="canvas" class="canvas" width="300" height="200" style="border: 1px solid #000;"> </canvas>
Je viens de mettre cela dans un jsfiddle et les cercles ont montré où j'ai cliqué.
Si votre toile est inférieure au sommet de votre document, il poussera les cercles vers le bas.
Donc je ne peux pas avoir d'en-tête?