Saya ingin mencipta kesan lukisan garisan dengan tetikus, yang serupa dengan fungsi lukisan garisan papan lukisan yang disertakan dengan tingkap. Ini memerlukan mendapatkan koordinat tetikus, tetapi saya sentiasa merasakan bahawa koordinat tidak diperoleh dengan tepat Setiap kali saya melukis garisan pada kanvas, garisan itu sentiasa dilukis dengan jelas di bawah kursor, bukan dari kedudukan kursor melukis garisan. Jika anda melukis garisan di bahagian bawah kanvas dan ia tidak boleh keluar sama sekali, nilai koordinat sebenar yang diperoleh mungkin melebihi saiz kanvas. Mungkinkah kaedah saya untuk mendapatkan nilai koordinat adalah salah? Saya ingin bertanya kepada semua orang!
<!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] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
digantikan dengan
Perbezaan antara lebar dan tinggi tag kanvas dan gaya.lebar dan gaya.tinggi