光标和画布上的绘图之间的间隙

Question

我已经在一个问题上被困了好几天，我似乎找不到解决方案。光标和绘图之间存在间隙，我不知道如何修复它。 我已经在 HTML 而不是 CSS 文件中设置了画布的高度/宽度，我尝试了不同的方法来获取光标位置，并添加/删除一些像素来纠正 lineTo 行上的间隙，但它不会改变任何东西。 作为信息，我的画布位于宽度为 40% 的容器中的地图旁边，我不知道这是否是问题所在，但我不想更改它。

class Canvas {
constructor(canvasId) {
this.canvas = canvasId;
this.ctx = this.canvas.getContext('2d');
this.signing = false;
}
load() {
this.start();
this.draw();
this.stop();
}
start() {
this.canvas.addEventListener('mousedown', () => {
this.signing = true;
const rectangle = this.canvas.getBoundingClientRect(e);
this.ctx.moveTo(e.clientX - rectangle.left, e.clientY - rectangle.top);
this.beginPath();
});
}
stop() {
this.canvas.addEventListener('mouseup', () => {
this.signing = false;
this.ctx.beginPath();
});
}
draw() {
this.canvas.addEventListener('mousemove', (e) => {
if (this.signing === true) {
this.ctx.lineWidth = '2';
this.ctx.lineCap = "round";
this.ctx.lineTo(e.clientX - this.canvas.offsetLeft - 65, e.clientY - this.canvas.offsetTop - 40);
this.ctx.stroke();
}
});
}
};
const signature = new Canvas(document.getElementById('to-sign'));
signature.load();

canvas {
border: solid; 
}

<canvas id="to-sign" class="full-width" width="620" height="160">
Non supporté sur votre navigateur
</canvas>

Answer 1

如果您的画布上有填充，则会出现此问题。getBoundingClientRect返回元素边框的位置和大小。这包括填充。请参阅CSS盒模型简介和getBoundingClientRect的参考