HTML5 实例：签名板（canvas）_html5 canvas demo 鼠标写字-优快云博客

本文链接：https://blog.youkuaiyun.com/Alice_Lee_Lee/article/details/119800348

本文介绍了如何利用HTML5的canvas元素创建一个电子签名板，用户可以通过鼠标按下并移动进行书写，实现简单易用的签名功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用 canvas 实现电子签名板，按下鼠标移动即可书写

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    html,
    body {
      width: 100%;
      overflow: hidden;
    }
    body {
      background: gray;
    }

    #test {
      background: white;
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      margin: auto;
    }
  </style>
  <title>Document</title>
</head>

<body>
  <canvas id="test" width="300" height="300">
    <span>您的浏览器不支持canvas，请换用其他浏览器尝试</span>
  </canvas>
  <script>
    window.onload = function () {
      var canvas = document.querySelector('#test');
      var ctx;
      if (canvas.getContext) {
        ctx = canvas.getContext('2d');
      }
      canvas.onmousedown = function (event) {
        event = event || window.event;
        if (canvas.setCapture) {
          canvas.setCapture();
        }
        ctx.beginPath();
        ctx.moveTo(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
        // 鼠标移动时绘制线
        document.onmousemove = function (event) {
          event = event || window.event;
          ctx.save();
          ctx.strokeStyle = 'red';
          ctx.lineTo(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
          ctx.stroke();
          ctx.restore();
        }
        document.onmouseup = function () {
          document.onmousemove = null;
          document.onmouseup = null;
          if (document.releaseCapture) {
            document.releaseCapture();
          }
        }
        return false;
      }
    }
  </script>
</body>
</html>