Ich möchte mit der Maus einen Strichzeichnungseffekt erzeugen, der der Strichzeichnungsfunktion des im Fenster enthaltenen Zeichenbretts ähnelt. Dazu müssen die Koordinaten der Maus ermittelt werden, aber ich habe immer das Gefühl, dass die Koordinaten nicht genau ermittelt werden. Jedes Mal, wenn ich eine Linie auf der Leinwand zeichne, wird die Linie immer deutlich unterhalb des Cursors gezeichnet, nicht von der Position des Cursors aus Linien zeichnen. Wenn Sie am unteren Rand der Leinwand eine Linie zeichnen und diese überhaupt nicht herauskommen kann, überschreitet der tatsächlich erhaltene Koordinatenwert möglicherweise die Größe der Leinwand. Könnte es sein, dass meine Methode zum Erhalten von Koordinatenwerten falsch ist? Ich möchte alle fragen!
<!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-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
换成
canvas标签的width和height以及style.width和style.height的区别