时间戳

首页 > 解决方案 > 使用 css 更改画布的宽度

javascript - 使用 css 更改画布的宽度

问题描述

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

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

我可以随心所欲地改变宽度。但是，当我使用 CSS 更改宽度时，width:80vw即使画布宽度增加，我也不能再在那里登录，或者鼠标指针和签名指针位于不同的位置。我不知道如何解决这个问题。

标签： javascripthtmlcss

解决方案

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

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

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

推荐阅读