当前位置：首页 > HTML

h5实现写字

2026-03-06 14:50:49HTML

使用Canvas实现写字功能

HTML5的Canvas元素可以用于实现手写或动态写字效果。以下是一个基础实现示例：

<!DOCTYPE html>
<html>
<head>
    <title>Canvas写字示例</title>
    <style>
        canvas {
            border: 1px solid #000;
            background-color: #f8f8f8;
        }
    </style>
</head>
<body>
    <canvas id="drawingCanvas" width="600" height="400"></canvas>
    <button id="clearBtn">清除画布</button>

    <script>
        const canvas = document.getElementById('drawingCanvas');
        const ctx = canvas.getContext('2d');
        let isDrawing = false;

        canvas.addEventListener('mousedown', startDrawing);
        canvas.addEventListener('mousemove', draw);
        canvas.addEventListener('mouseup', stopDrawing);
        canvas.addEventListener('mouseout', stopDrawing);

        document.getElementById('clearBtn').addEventListener('click', clearCanvas);

        function startDrawing(e) {
            isDrawing = true;
            draw(e);
        }

        function draw(e) {
            if (!isDrawing) return;

            ctx.lineWidth = 5;
            ctx.lineCap = 'round';
            ctx.strokeStyle = '#000';

            ctx.lineTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
            ctx.stroke();
            ctx.beginPath();
            ctx.moveTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
        }

        function stopDrawing() {
            isDrawing = false;
            ctx.beginPath();
        }

        function clearCanvas() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
        }
    </script>
</body>
</html>

使用SVG实现动态文字

SVG也可以用于创建动态文字效果：

h5实现写字

<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
    <path id="textPath" d="M50,100 C100,50 150,150 200,100 S300,50 350,100" 
          fill="none" stroke="transparent"/>
    <text font-size="16" fill="black">
        <textPath href="#textPath">
            这是一段沿着路径显示的文字
        </textPath>
    </text>
</svg>

逐笔书写动画效果

使用CSS和JavaScript可以实现逐笔书写动画：

h5实现写字

<div class="handwriting">
    <svg viewBox="0 0 500 100">
        <path class="path" d="M10,50 Q25,10 40,50 T70,50 T100,50 T130,50" 
              fill="none" stroke="black" stroke-width="2"/>
    </svg>
</div>

<style>
    .path {
        stroke-dasharray: 1000;
        stroke-dashoffset: 1000;
        animation: write 3s ease-in-out forwards;
    }

    @keyframes write {
        to {
            stroke-dashoffset: 0;
        }
    }
</style>

使用第三方库

考虑使用现成的库简化开发：

Signature Pad：专门用于手写签名的库
Rough.js：创建手绘风格图形
Fabric.js：功能强大的Canvas库

<script src="https://cdn.jsdelivr.net/npm/signature_pad@4.0.0/dist/signature_pad.umd.min.js"></script>
<canvas id="signature-pad" width="400" height="200"></canvas>
<button id="clear">清除</button>

<script>
    const canvas = document.getElementById('signature-pad');
    const signaturePad = new SignaturePad(canvas);

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

移动端触摸支持

为移动设备添加触摸事件支持：

// 在Canvas示例中添加触摸事件
canvas.addEventListener('touchstart', handleTouchStart);
canvas.addEventListener('touchmove', handleTouchMove);
canvas.addEventListener('touchend', handleTouchEnd);

function handleTouchStart(e) {
    e.preventDefault();
    const touch = e.touches[0];
    const mouseEvent = new MouseEvent('mousedown', {
        clientX: touch.clientX,
        clientY: touch.clientY
    });
    canvas.dispatchEvent(mouseEvent);
}

function handleTouchMove(e) {
    e.preventDefault();
    const touch = e.touches[0];
    const mouseEvent = new MouseEvent('mousemove', {
        clientX: touch.clientX,
        clientY: touch.clientY
    });
    canvas.dispatchEvent(mouseEvent);
}

function handleTouchEnd() {
    const mouseEvent = new MouseEvent('mouseup');
    canvas.dispatchEvent(mouseEvent);
}

以上方法提供了从基础到高级的H5写字实现方案，可根据具体需求选择合适的方式或组合使用。

分享给朋友：