Signature签名组件在移动端无法正常绘制，怎么回事？

上官玉涵提问于 2026-03-10 14:31:19 阅读 90

组件

我在用一个基于canvas的Signature签名组件，PC上一切正常，但一到手机上就划不动，根本签不了名。试过加了touch-action: none还是没用。

控制台也没报错，就是手指滑动完全没反应。是不是要手动处理touch事件？我现在的初始化代码是这样的：

const signaturePad = new SignaturePad(canvas, {
  backgroundColor: 'rgb(255, 255, 255)',
  penColor: 'rgb(0, 0, 0)'
});

我来解答赞 6 收藏

反馈

1 条解答

Dev · 瑞腾 Lv1

移动端canvas最常见的问题是尺寸没处理好，光设置CSS宽高没用，得把canvas的width/height属性也同步改过来，还要考虑devicePixelRatio。

重置一下canvas尺寸试试：

function resizeCanvas(canvas) {

  const ratio = Math.max(window.devicePixelRatio || 1, 1);

  canvas.width = canvas.offsetWidth * ratio;

  canvas.height = canvas.offsetHeight * ratio;

  canvas.getContext('2d').scale(ratio, ratio);

}



resizeCanvas(canvas);

window.addEventListener('resize', () => resizeCanvas(canvas));

调用完再初始化SignaturePad，签名的触摸坐标就对应上了。

2026-03-10 17:09