实现一个签名效果demo

直接上代码

复制代码
<!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>
复制代码

 增加设备判断

复制代码
<!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 isPhone = false
    function isMobileDevice() {
      return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    }

    if (isMobileDevice()) {
      // 是手机设备
      console.log("手机浏览器");
      isPhone = true
    } else {
      // 是PC浏览器
      console.log("PC浏览器");
      isPhone = false
    }
    var canvas = document.getElementById('signature-pad');
    var ctx = canvas.getContext('2d');
    var isDrawing = false;
    var lastX = 0;
    var lastY = 0;

    if(isPhone){
      canvas.addEventListener('touchstart', startDrawing);
      canvas.addEventListener('touchmove', draw);
      canvas.addEventListener('touchend', stopDrawing);
      canvas.addEventListener('touchcancel', stopDrawing);
    }else{
      canvas.addEventListener('mousedown', startDrawing);
      canvas.addEventListener('mousemove', draw);
      canvas.addEventListener('mouseup', stopDrawing);
      canvas.addEventListener('mouseleave', stopDrawing);
    }

    function startDrawing(e) {
      isDrawing = true;
      if(isPhone){
        var touch = e.touches[0];
        console.log(touch.clientX,canvas.offsetLeft)
        lastX = touch.clientX - canvas.offsetLeft;
        lastY = touch.clientY - canvas.offsetTop;
      }else{
        lastX = e.offsetX;
        lastY = e.offsetY;
      }
    }

    function draw(e) {
      if (!isDrawing) return;
      ctx.beginPath();
      ctx.moveTo(lastX, lastY);
      var x,y
      if(isPhone){
        var touch = e.touches[0];
        x = touch.clientX - canvas.offsetLeft;
        y = touch.clientY - canvas.offsetTop;
      }else{
        x = e.offsetX;
        y = e.offsetY;
      }
      ctx.lineTo(x, y);
      ctx.lineWidth = 2;
      ctx.strokeStyle = 'blue';
      ctx.stroke();
      lastX = x;
      lastY = y;
    }

    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>
复制代码

 

posted @   lijun12138  阅读(74)  评论(0)  编辑  收藏  举报
相关博文：
· canvas实现弹幕效果
· js控制手机横屏显示
· html canvas签名
· uniapp: 简单实现手写签名
· 20行js代码实现手写签名
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示