html 手写签名

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手写签名 PC+移动端兼容</title>
</head>

<body>
    <div id="box" style="width: 100%;height: 200px;border: 1px solid #ccc;">
        <canvas id="canvas"></canvas>
    </div>
    <div>
        选择颜色：<input type="color" id="colorPicker">
    </div>
    <div>
        选择画笔宽度：<input type="range" min="1" max="100" id="brushWidthPicker">
        <span id="brushWidthValue"></span>
    </div>
    <div style="display: flex;flex-direction: column;gap:4px;margin:8px 0;">
        <!-- radio: round 线条端点圆角 square方角 butt平滑 -->
        选择画笔样式:
        <div>
            <input type="radio" id="round" name="drone" value="round" checked />
            <label for="round">圆角</label>
        </div>
        <div>
            <input type="radio" id="square" name="drone" value="square" />
            <label for="square">方角</label>
        </div>
        <div>
            <input type="radio" id="butt" name="drone" value="butt" />
            <label for="butt">平滑</label>
        </div>
    </div>
    <div>
        选择线条连接处样式：
        <div>
            <input type="radio" id="roundJoin" name="join" value="round" checked />
            <label for="roundJoin">圆角</label>
        </div>
        <div>
            <input type="radio" id="bevelJoin" name="join" value="bevel" />
            <label for="bevelJoin">方角</label>
        </div>
        <div>
            <input type="radio" id="miterJoin" name="join" value="miter" />
            <label for="miterJoin">斜接</label>
        </div>
    </div>
    <button id="rewrite">重写</button>
    <button id="confirm">确定</button>

    <div style="margin-top: 100px;">
        <h3>生成的签名</h3>
        <img id="signImg" style="border: 1px dashed #ccc;border-radius: 5px;" src="">
    </div>

    <script>
        let sign = '';
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        const box = document.getElementById('box');
        const colorPicker = document.getElementById('colorPicker');
        const brushWidthPicker = document.getElementById('brushWidthPicker');
        const brushWidthValue = document.getElementById('brushWidthValue');

        // 绘制开关：只有按下鼠标/手指才允许画线
        let isDrawing = false;
        // 画笔参数
        let brushWidth = 2;
        let brushColor = '#f00';
        let brushJoin = 'round'; // 线条连接处圆角
        let brushCap = 'round';    // 线条端点样式

        // 初始化颜色选择器
        colorPicker.value = brushColor;
        colorPicker.addEventListener('change', () => {
            brushColor = colorPicker.value;
            setBrush();
        });

        // 画笔宽度
        brushWidthPicker.value = brushWidth;
        brushWidthValue.textContent = brushWidth;
        brushWidthPicker.addEventListener('input', (e) => {
            brushWidthValue.textContent = e.target.value;
            brushWidth = Number(e.target.value);
            setBrush();
        });

        //监听radio切换画笔端点样式
        const radioList = document.querySelectorAll('input[name="drone"]');
        radioList.forEach(radio => {
            radio.addEventListener('change', function () {
                brushCap = this.value;
                setBrush();
            })
        });

        // 监听radio切换线条连接处样式
        const joinRadioList = document.querySelectorAll('input[name="join"]');
        joinRadioList.forEach(radio => {
            radio.addEventListener('change', function () {
                brushJoin = this.value;
                setBrush();
            })
        });

        // 设置画笔样式
        function setBrush() {
            ctx.lineWidth = brushWidth;
            ctx.lineCap = brushCap;
            ctx.lineJoin = brushJoin;
            ctx.strokeStyle = brushColor;
        }

        // 初始化画布尺寸
        function setCanvasSize() {
            canvas.width = box.offsetWidth;
            canvas.height = box.offsetHeight;
        }
        setCanvasSize();
        // 监听窗口大小变化事件
        window.addEventListener('resize', setCanvasSize);

        // ====================== PC 鼠标事件 ======================
        canvas.addEventListener('mousedown', (e) => {
            isDrawing = true;
            setBrush();
            ctx.beginPath();
            ctx.moveTo(e.offsetX, e.offsetY);
        });
        // 监听PC端鼠标移动事件
        canvas.addEventListener('mousemove', (e) => {
            if (!isDrawing) return;
            ctx.lineTo(e.offsetX, e.offsetY);
            ctx.stroke();
        });
        // 监听PC端鼠标松开事件
        canvas.addEventListener('mouseup', () => isDrawing = false);
        // 监听PC端鼠标离开画布事件
        canvas.addEventListener('mouseleave', () => isDrawing = false);

        // ====================== 移动端触摸事件 ======================
        function getTouchPos(touch) {
            const rect = canvas.getBoundingClientRect();
            return {
                x: touch.pageX - rect.left,
                y: touch.pageY - rect.top
            }
        }
        // 监听移动端触摸事件
        canvas.addEventListener('touchstart', (e) => {
            e.preventDefault();
            isDrawing = true;
            setBrush();
            ctx.beginPath();
            const pos = getTouchPos(e.touches[0]);
            ctx.moveTo(pos.x, pos.y);
        });
        // 监听移动端触摸移动事件
        canvas.addEventListener('touchmove', (e) => {
            e.preventDefault();
            if (!isDrawing) return;
            const pos = getTouchPos(e.touches[0]);
            ctx.lineTo(pos.x, pos.y);
            ctx.stroke();
        });
        // 监听移动端触摸结束事件
        canvas.addEventListener('touchend', () => isDrawing = false);

        // ====================== 按钮功能 ======================
        // 重写清空画布
        document.querySelector('#rewrite').addEventListener('click', () => {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            sign = '';
            document.getElementById('signImg').src = '';
        });

        // 确定生成base64签名
        document.querySelector('#confirm').addEventListener('click', () => {
            sign = canvas.toDataURL('image/png');
            document.getElementById('signImg').src = sign;
            console.log('签名base64：', sign);
        });
    </script>
</body>

</html>
posted @ 2026-06-19 09:53  红色的风  阅读(30)  评论(0)    收藏  举报