如何在 HTML 中创建签名板 | 签名板 JavaScript

大家好，今天我将向你们展示如何使用 HTML CSS 和 JavaScript 创建签名板，在这个视频中，我将使用签名板 JavaScript 库创建 JavaScript 签名板。

JavaScript 签名板分步说明

步骤 1 — 创建新项目

在此步骤中，我们需要创建一个新的项目文件夹和文件（index.html，style.css），以创建一个出色的响应式网站页脚。下一步，您将开始创建网页结构。

您可能还喜欢这些：

第 2 步 — 设置基本结构

在此步骤中，我们将添加 HTML 代码来创建项目的基本结构。

<!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">
    <title>How to create signature pad in html</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

</body>
</html>

这是大多数使用 HTML 的网页的基本结构。

在标签内添加以下代码<body>：

<div class="flex-row">
       <div class="wrapper">
           <canvas id="signature-pad" width="400" height="200"></canvas>
       </div>
       <div class="clear-btn">
           <button id="clear"><span> Clear </span></button>
       </div>
   </div>

第 3 步 — 为类添加样式

在此步骤中，我们将向 style.css 文件内的部分类添加样式

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
* {
    padding: 0;
    margin: 0;
    font-family: 'Poppins', sans-serif;
}
body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100vw;
    background: #ececec;
    overflow: hidden;
}
.flex-row {
    display: flex;
}
.wrapper {
    border: 1px solid #4b00ff;
    border-right: 0;
}
canvas#signature-pad {
    background: #fff;
    width: 100%;
    height: 100%;
    cursor: crosshair;
}
button#clear {
    height: 100%;
    background: #4b00ff;
    border: 1px solid transparent;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}
button#clear span {
    transform: rotate(90deg);
    display: block;
}

步骤 4 — 添加签名板 JavaScript 库和代码

在这一步中，我们将添加一些 javascript 代码来生成画布并添加签名板库。

<script src="https://cdnjs.cloudflare.com/ajax/libs/signature_pad/1.3.5/signature_pad.min.js" integrity="sha512-kw/nRM/BMR2XGArXnOoxKOO5VBHLdITAW00aG8qK4zBzcLVZ4nzg7/oYCaoiwc8U9zrnsO9UHqpyljJ8+iqYiQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></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(250,250,250)'
       });

       document.getElementById("clear").addEventListener('click', function(){
        signaturePad.clear();
       })
   </script>

#最终结果

文章来源：https://dev.to/stackfindover/how-to-create-signature-pad-in-html-signature-pad-javascript-3866