实现一个签名效果demo-526互联

直接上代码

<!DOCTYPE html>
<html>
<head>
  <title>横屏签名页面</title>
  <style>
    canvas {
      border: 1px solid #000;
      touch-action: none;
    }
    button {
      margin-top: 10px;
    }
  </style>
  <script src="https://unpkg.com/signature_pad"></script>
</head>
<body>
  <h1>横屏签名页面</h1>
  <canvas id="signatureCanvas" width="400" height="200"></canvas>
  <button id="clearButton">清除</button>
  <button id="saveButton">保存</button>

  <script>
    // 获取 canvas 元素和按钮元素
    const canvas = document.getElementById('signatureCanvas');
    const clearButton = document.getElementById('clearButton');
    const saveButton = document.getElementById('saveButton');

    // 获取绘图上下文
    const ctx = canvas.getContext('2d');

    // 初始化签名面板
    const signaturePad = new SignaturePad(canvas);

    // 清除按钮点击事件
    clearButton.addEventListener('click', function() {
      signaturePad.clear();
    });

    // 保存按钮点击事件
    saveButton.addEventListener('click', function() {
      if (signaturePad.isEmpty()) {
        alert('请先签名');
      } else {
        // 获取签名数据URL
        const dataURL = signaturePad.toDataURL();
        // TODO: 在这里可以将 dataURL 发送到服务器保存
        alert('签名已保存');
        console.log(dataURL)
      }
    });
  </script>
</body>
</html>

纯js实现

<!DOCTYPE html>
<html>
<head>
  <style>
    #signature-pad {
      position: relative;
      width: 500px;
      height: 300px;
      border: 1px solid #000;
      touch-action: none;
    }
  </style>
</head>
<body>
  <canvas id="signature-pad" width="500" height="300"></canvas>
  <button onclick="saveSignature()">Save</button>
  <button onclick="clearSignature()">Clear</button>
  <img id="img" src="" />
  <script>
    var canvas = document.getElementById('signature-pad');
    var ctx = canvas.getContext('2d');
    var isDrawing = false;
    var lastX = 0;
    var lastY = 0;

    canvas.addEventListener('mousedown', startDrawing);
    canvas.addEventListener('mousemove', draw);
    canvas.addEventListener('mouseup', stopDrawing);
    canvas.addEventListener('mouseleave', stopDrawing);

    function startDrawing(e) {
      isDrawing = true;
      lastX = e.offsetX;
      lastY = e.offsetY;
    }

    function draw(e) {
      if (!isDrawing) return;
      ctx.beginPath();
      ctx.moveTo(lastX, lastY);
      ctx.lineTo(e.offsetX, e.offsetY);
      ctx.stroke();
      lastX = e.offsetX;
      lastY = e.offsetY;
    }

    function stopDrawing() {
      isDrawing = false;
    }

    function saveSignature() {
      var dataURL = canvas.toDataURL();
      // 将签名数据进行保存或处理
      console.log(dataURL);
      document.getElementById('img').setAttribute('src',dataURL)
    }

    function clearSignature() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
    }
  </script>
</body>
</html>