SignaturePad 手写画板使用 & 背景未覆盖canvas问题

SignaturePad 的简单使用

<canvas id="drawing-board"></canvas>

let canvas = document.getElementById("drawing-board");
const signaturePad= new SignaturePad(canvas, {
    backgroundColor: '#FFFFFFFF', // 背景是不透明白色的
    penColor: 'rgba(0, 0, 0, 255)', // 笔的颜色是黑色的
    minWidth: 6, // 线的最小宽度
    maxWidth: 8, // 线的最大宽度x
});

function resizeCanvas() {
    let pageWidth = document.documentElement.clientWidth;
    let pageHeight = document.documentElement.clientHeight;

    // 记录图像，在调整canvas size之后重新写入
    let ctx = canvas.getContext('2d');
    let data= signaturePad.toData()
    canvas.width = pageWidth;
    canvas.height = pageHeight;

    // This library does not listen for canvas changes, so after the canvas is automatically
    // cleared by the browser, SignaturePad#isEmpty might still return false, even though the
    // canvas looks empty, because the internal data of this library wasn't cleared. To make sure
    // that the state of this library is consistent with visual state of the canvas, you
    // have to clear it manually.
    signaturePad.clear()  // 这个是必须的，否则在一开始的时候, SignaturePad的背景设置不能覆盖所有的canvas。
    signaturePad.fromData(data)
}

注意坑1

下面是在resizeCanvas 不加 mnistPad.clear() 时的页面。可以看到，canvas中只有左上角的300px 150px 的方框内背景是上面mnistPad中设置的。

上面主要部分canvas + SignaturePad

至于原因，是因为SignaturePad不会监听canvas的变化，当canvas的height width变化时，需要我们使用 signaturePad.clear() “刷新”一下，让SignaturePad的配置应用到canvas
其实这个在SignaturePad官网那例子中用一段话说了下，我当时想实现在调整页面时不要清空画板的内容，所以就把这个signaturePad.clear()给删除了。然后就产生了上图莫名其妙的错误。找了很久。以后用别人的库还是要认真看例子啊。

注意坑2

在使用erase擦除功能实际上是使ctx.globalCompositeOperation='destination-out'，让笔画画的地方透明。如果在这种情况下调用 signaturePad.clear()，会使整个canvas的背景都变透明。需要特别注意！

 var ctx = canvas.getContext('2d');
 ctx.globalCompositeOperation = 'destination-out';

最后编辑于：2022.01.01 08:08:56