add *

Signed-off-by: tangshi <tangshi@eryang.wang>
2026-07-17 05:40:08 +00:00
1 changed files with 188 additions and 0 deletions
@@ -0,0 +1,188 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>电子签名板</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: "Microsoft YaHei", sans-serif;
+        }
+        body {
+            background-color: #f5f7fa;
+            padding: 30px;
+        }
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            background: #fff;
+            padding: 25px;
+            border-radius: 12px;
+            box-shadow: 0 2px 15px rgba(0,0,0,0.1);
+        }
+        h2 {
+            text-align: center;
+            color: #333;
+            margin-bottom: 20px;
+        }
+        .tool-bar {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 12px;
+            margin-bottom: 15px;
+            align-items: center;
+        }
+        button {
+            padding: 8px 16px;
+            border: none;
+            border-radius: 6px;
+            cursor: pointer;
+            font-size: 14px;
+            transition: 0.2s;
+        }
+        #clearBtn {
+            background: #ff4d4f;
+            color: white;
+        }
+        #saveBtn {
+            background: #1677ff;
+            color: white;
+        }
+        button:hover {
+            opacity: 0.85;
+        }
+        .line-wrap {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        #canvasBox {
+            border: 2px solid #ccc;
+            border-radius: 8px;
+            background: #fff;
+        }
+        canvas {
+            display: block;
+            cursor: crosshair;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h2>电子签名手写板</h2>
+        <div class="tool-bar">
+            <button id="clearBtn">清空签名</button>
+            <button id="saveBtn">下载签名图片</button>
+            <div class="line-wrap">
+                <span>画笔粗细：</span>
+                <input type="range" id="lineWidth" min="1" max="20" value="4">
+            </div>
+            <div class="line-wrap">
+                <span>画笔颜色：</span>
+                <input type="color" id="colorPicker" value="#000000">
+            </div>
+        </div>
+        <div id="canvasBox">
+            <canvas id="signCanvas" width="750" height="350"></canvas>
+        </div>
+    </div>
+
+    <script>
+        // 获取元素
+        const canvas = document.getElementById('signCanvas');
+        const ctx = canvas.getContext('2d');
+        const clearBtn = document.getElementById('clearBtn');
+        const saveBtn = document.getElementById('saveBtn');
+        const lineWidthInput = document.getElementById('lineWidth');
+        const colorPicker = document.getElementById('colorPicker');
+
+        // 绘图状态
+        let isDraw = false;
+        let lastX = 0;
+        let lastY = 0;
+
+        // 初始化画笔
+        ctx.lineCap = 'round';
+        ctx.lineJoin = 'round';
+        ctx.lineWidth = lineWidthInput.value;
+        ctx.strokeStyle = colorPicker.value;
+
+        // 鼠标按下
+        canvas.addEventListener('mousedown', startDraw);
+        // 鼠标移动
+        canvas.addEventListener('mousemove', drawing);
+        // 鼠标松开/离开
+        canvas.addEventListener('mouseup', stopDraw);
+        canvas.addEventListener('mouseleave', stopDraw);
+
+        // 触屏兼容（手机平板可用）
+        canvas.addEventListener('touchstart', touchStart);
+        canvas.addEventListener('touchmove', touchDraw);
+        canvas.addEventListener('touchend', stopDraw);
+
+        // 画笔粗细切换
+        lineWidthInput.addEventListener('input', () => {
+            ctx.lineWidth = lineWidthInput.value;
+        });
+        // 画笔颜色切换
+        colorPicker.addEventListener('input', () => {
+            ctx.strokeStyle = colorPicker.value;
+        });
+
+        // 清空画布
+        clearBtn.addEventListener('click', () => {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+        });
+
+        // 下载签名图片
+        saveBtn.addEventListener('click', () => {
+            const link = document.createElement('a');
+            link.download = '我的签名.png';
+            link.href = canvas.toDataURL('image/png');
+            link.click();
+        });
+
+        // 鼠标绘图函数
+        function startDraw(e) {
+            isDraw = true;
+            lastX = e.offsetX;
+            lastY = e.offsetY;
+        }
+        function drawing(e) {
+            if (!isDraw) return;
+            ctx.beginPath();
+            ctx.moveTo(lastX, lastY);
+            ctx.lineTo(e.offsetX, e.offsetY);
+            ctx.stroke();
+            lastX = e.offsetX;
+            lastY = e.offsetY;
+        }
+        function stopDraw() {
+            isDraw = false;
+        }
+
+        // 触屏绘图函数
+        function touchStart(e) {
+            e.preventDefault();
+            const touch = e.touches[0];
+            const mouseEvent = new MouseEvent('mousedown', {
+                offsetX: touch.clientX - canvas.getBoundingClientRect().left,
+                offsetY: touch.clientY - canvas.getBoundingClientRect().top
+            });
+            canvas.dispatchEvent(mouseEvent);
+        }
+        function touchDraw(e) {
+            e.preventDefault();
+            const touch = e.touches[0];
+            const mouseEvent = new MouseEvent('mousemove', {
+                offsetX: touch.clientX - canvas.getBoundingClientRect().left,
+                offsetY: touch.clientY - canvas.getBoundingClientRect().top
+            });
+            canvas.dispatchEvent(mouseEvent);
+        }
+    </script>
+</body>
+</html>