简单网页中HTML canvas实现电子签名功能不生效问题求助

• 脚本执行时机错误：你将JS代码写在了<head>标签中，代码运行时<body>内的canvas元素、clear按钮还未被浏览器渲染，document.getElementById('signature-pad')返回null，后续所有操作都会抛出异常无法执行。
• 缺失第三方依赖：代码中用到的SignaturePad是第三方封装的签名工具类，你没有引入对应的JS文件，运行时会直接抛出SignaturePad is not defined的错误，初始化逻辑直接中断。

1. 调整脚本位置：把所有JS逻辑移到</body>闭合标签之前，确保DOM元素加载完成后再执行JS代码。
2. 引入SignaturePad依赖：你可以先将SignaturePad的JS源码下载到本地，在你的业务代码之前用<script>标签引入即可。

下面是修复后的完整代码示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>eSignature Page</title>
    <style>
        .wrapper {
            position: relative;
            width: 400px;
            height: 200px;
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            user-select: none;
            border: 1px solid #ccc;
        }
        .signature-pad {
            position: absolute;
            left: 0;
            top: 0;
            width: 400px;
            height: 200px;
            background-color: white;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <canvas id="signature-pad" class="signature-pad" width=400 height=200></canvas>
    </div>
    <button id="clear">Clear</button>
    <!-- 这里替换为你本地的signature_pad.js文件路径 -->
    <script src="./signature_pad.js"></script>
    <script>
        var canvas = document.getElementById('signature-pad');
        function resizeCanvas() {
            var ratio = Math.max(window.devicePixelRatio || 1, 1);
            canvas.width = canvas.offsetWidth * ratio;
            canvas.height = canvas.offsetHeight * ratio;
            canvas.getContext("2d").scale(ratio, ratio);
        }
        window.onresize = resizeCanvas;
        resizeCanvas();
        var signaturePad = new SignaturePad(canvas, {
            backgroundColor: 'rgb(255, 255, 255)'
        });
        document.getElementById('clear').addEventListener('click', function () {
            signaturePad.clear();
        });
    </script>
</body>
</html>

如果你不想依赖第三方库，也可以用原生JS实现基础的绘制功能，替换上面的业务JS代码即可：

var canvas = document.getElementById('signature-pad');
var ctx = canvas.getContext('2d');
var isDrawing = false;
// 调整画布分辨率
function resizeCanvas() {
    var ratio = Math.max(window.devicePixelRatio || 1, 1);
    canvas.width = canvas.offsetWidth * ratio;
    canvas.height = canvas.offsetHeight * ratio;
    ctx.scale(ratio, ratio);
    ctx.lineWidth = 2;
    ctx.strokeStyle = '#000';
}
window.onresize = resizeCanvas;
resizeCanvas();
// 绘制事件绑定
canvas.addEventListener('mousedown', function(e) {
    isDrawing = true;
    var rect = canvas.getBoundingClientRect();
    ctx.moveTo(e.clientX - rect.left, e.clientY - rect.top);
});
canvas.addEventListener('mousemove', function(e) {
    if (!isDrawing) return;
    var rect = canvas.getBoundingClientRect();
    ctx.lineTo(e.clientX - rect.left, e.clientY - rect.top);
    ctx.stroke();
});
canvas.addEventListener('mouseup', function() {
    isDrawing = false;
});
canvas.addEventListener('mouseout', function() {
    isDrawing = false;
});
// 清空按钮功能
document.getElementById('clear').addEventListener('click', function () {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
});

内容的提问来源于stack exchange，提问作者4N335