Question

我正在使用在代码笔中找到的this JavaScript签名板。我可以使用HTML设置画布的宽度

<canvas id="signature-pad" width="600" height="200"></canvas>

我可以根据需要更改宽度。但是，当我使用width:80vw之类的CSS来更改宽度时，即使画布的宽度增加了，我也无法再在其中登录或鼠标指针登录，并且签名的指针位于另一个位置。我不知道该如何解决。

Answer 1

您可以在SignaturePad（codepen fork）的构造函数中添加类似的内容：

    canvas.width = canvas.scrollWidth;
    canvas.height = canvas.scrollHeight;
    window.addEventListener('resize', function() {
      canvas.width = canvas.scrollWidth;
      canvas.height = canvas.scrollHeight;
    });

仅当您的画布绘图宽度和高度等于画布元素的宽度和高度时，鼠标位置的计算才能正确工作。

Answer 2

问题

width元素上的

height和canvas属性指定可以绘制的像素数量。通过使用CSS使画布变大，您只需拉伸600x200画布使其显示变大。

如何解决此问题？

使用height和width属性以您期望的方式调整画布的大小-例如在resize事件中使用JavaScript。

使用CSS更改画布的宽度

2 个答案: