Je souhaite créer un effet de dessin au trait avec la souris, similaire à la fonction de dessin au trait de la planche à dessin fournie avec la fenêtre. Cela nécessite d'obtenir les coordonnées de la souris, mais j'ai toujours l'impression que les coordonnées ne sont pas obtenues avec précision. Chaque fois que je trace une ligne sur le canevas, la ligne est toujours tracée clairement sous le curseur, et non à partir de la position du curseur. tracer des lignes. Si vous tracez une ligne au bas du canevas et qu'elle ne peut pas sortir du tout, la valeur réelle des coordonnées obtenue peut dépasser la taille du canevas. Se pourrait-il que ma méthode d'obtention des valeurs de coordonnées soit erronée ? Je voudrais demander à tout le monde !
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style> body {
background: #000;
} </style>
<script> window.onload = function () {
var oC = document.getElementById('cav');
var ctx = oC.getContext('2d');
oC.onmousedown = function (evt) {
var x = evt.pageX - oC.offsetLeft;
var y = evt.pageY - oC.offsetTop;
ctx.moveTo(x, y);
oC.onmousemove = function (evt) {
var x = evt.pageX - oC.offsetLeft;
var y = evt.pageY - oC.offsetTop;
ctx.lineTo(x, y);
ctx.stroke();
}
oC.onmouseup = function () {
oC.onmousemove = null
}
}
} </script>
</head>
<body>
<canvas id="cav" style="width: 400px;height: 400px;background: white"></canvas>
</body>
</html>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
est remplacé par
La différence entre la largeur et la hauteur de la balise de toile et style.width et style.height