当前位置：首页 > JavaScript

js实现盖章

2026-04-06 22:01:13JavaScript

实现盖章效果的JavaScript方法

使用Canvas绘制印章

创建Canvas元素并通过JavaScript绘制印章图形和文字。以下是一个基础实现示例：

js实现盖章

// 创建Canvas元素
const canvas = document.createElement('canvas');
canvas.width = 200;
canvas.height = 200;
document.body.appendChild(canvas);

const ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';

// 绘制圆形印章
ctx.beginPath();
ctx.arc(100, 100, 80, 0, Math.PI * 2);
ctx.lineWidth = 3;
ctx.stroke();

// 添加印章文字
ctx.font = '16px Arial';
ctx.textAlign = 'center';
ctx.fillText('专用章', 100, 100);

// 添加五角星
drawStar(ctx, 100, 100, 20, 5, 0);
function drawStar(ctx, cx, cy, spikes, outerRadius, innerRadius) {
    let rot = Math.PI/2*3;
    let x = cx;
    let y = cy;
    let step = Math.PI/spikes;

    ctx.beginPath();
    ctx.moveTo(cx, cy-outerRadius);
    for(let i=0; i<spikes; i++){
        x = cx + Math.cos(rot)*outerRadius;
        y = cy + Math.sin(rot)*outerRadius;
        ctx.lineTo(x,y);
        rot += step;

        x = cx + Math.cos(rot)*innerRadius;
        y = cy + Math.sin(rot)*innerRadius;
        ctx.lineTo(x,y);
        rot += step;
    }
    ctx.lineTo(cx, cy-outerRadius);
    ctx.closePath();
    ctx.fill();
}

使用CSS和HTML模拟印章

通过CSS创建印章视觉效果：

js实现盖章

<div class="stamp">
    <div class="stamp-circle"></div>
    <div class="stamp-text">公司公章</div>
    <div class="stamp-star">★</div>
</div>

<style>
.stamp {
    position: relative;
    width: 200px;
    height: 200px;
}

.stamp-circle {
    position: absolute;
    width: 180px;
    height: 180px;
    border: 3px solid red;
    border-radius: 50%;
    top: 10px;
    left: 10px;
}

.stamp-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: red;
    font-size: 24px;
    font-weight: bold;
}

.stamp-star {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: red;
    font-size: 30px;
}
</style>

使用SVG创建矢量印章

SVG实现可缩放的印章效果：

<svg width="200" height="200" viewBox="0 0 200 200">
    <circle cx="100" cy="100" r="80" fill="none" stroke="red" stroke-width="3"/>
    <text x="100" y="100" text-anchor="middle" fill="red" font-size="16" font-family="Arial">专用章</text>
    <path d="M100,30 L113,65 L150,65 L123,85 L135,120 L100,100 L65,120 L77,85 L50,65 L87,65 Z" fill="red"/>
</svg>

实现拖放盖章功能

结合以上方法实现可拖放的印章效果：

// 创建可拖动的印章
const stamp = document.createElement('div');
stamp.innerHTML = '<svg width="100" height="100" viewBox="0 0 200 200"><circle cx="100" cy="100" r="80" fill="none" stroke="red" stroke-width="3"/><text x="100" y="100" text-anchor="middle" fill="red" font-size="16" font-family="Arial">专用章</text><path d="M100,30 L113,65 L150,65 L123,85 L135,120 L100,100 L65,120 L77,85 L50,65 L87,65 Z" fill="red"/></svg>';
stamp.style.position = 'absolute';
stamp.style.cursor = 'move';
document.body.appendChild(stamp);

let isDragging = false;
let offsetX, offsetY;

stamp.addEventListener('mousedown', (e) => {
    isDragging = true;
    offsetX = e.clientX - stamp.getBoundingClientRect().left;
    offsetY = e.clientY - stamp.getBoundingClientRect().top;
    stamp.style.opacity = '0.7';
});

document.addEventListener('mousemove', (e) => {
    if (!isDragging) return;
    stamp.style.left = (e.clientX - offsetX) + 'px';
    stamp.style.top = (e.clientY - offsetY) + 'px';
});

document.addEventListener('mouseup', () => {
    isDragging = false;
    stamp.style.opacity = '1';
});

这些方法可以根据具体需求进行调整和组合，实现不同风格的印章效果。Canvas适合需要动态生成印章的场景，SVG适合需要矢量缩放的情况，而纯CSS方案则更简单轻量。

标签: js