印章生成

wgqxj · 发表于 2024-8-13 15:50:45

谢谢分享

cqcc · 发表于 2024-8-13 15:37:18

kike 发表于 2024-8-13 14:09
[mw_shl_code=html,true]

我打开就是两个输入框，输入文字怎么没有变化呢？

kyo9766 · 发表于 2024-8-13 15:34:50

膜拜，感谢分享

爱在峡谷横跳 · 发表于 2024-8-13 15:20:21

膜拜大佬

kike · 发表于 2024-8-13 14:09:14

本帖最后由 kike 于 2024-8-13 14:11 编辑

cqcc 发表于 2024-8-13 11:15
这个副标题（回帖专用章），目前是横向，改成有幅度的可以吗？就像(精易论坛源码区) 这几个字一样，挨着圆 ...

[HTML] 纯文本查看 复制代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实时预览</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .container {
            margin: 20px;
        }
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="container">
        <label for="companyName">公司名称：</label>
        <input type="text" id="companyName" name="companyName" required>
        <br><br>
        <label for="securityCode">防伪码：</label>
        <input type="text" id="securityCode" name="securityCode" required>
        <br><br>
        <canvas id="canvas" width="300" height="300"></canvas>
    </div>

    <script>
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext('2d');

        // 默认配置
        var config = {
            fontWeight05: 'bold',
            fontSize05: 10,
            sealScale09: 1,
            fontFamily05: '楷体',
            fontBorder05: 13,
            fontRotate05: 0.4,
            fontGap05: 0.4,//字间距
            input05: ''
        };

        function generateSeal(companyName, securityCode) {
            context.clearRect(0, 0, canvas.width, canvas.height);

            var width = canvas.width / 2;
            var height = canvas.height / 2;

            // 绘制印章边框
            context.lineWidth = 4;
            context.strokeStyle = "#f00";
            context.beginPath();
            context.arc(width, height, 100, 0, Math.PI * 2);
            context.stroke();

            // 绘制五角星
            create5star(context, width, height, 30, "#f00");

            // 绘制印章名称
            context.font = '20px 宋体';
            context.textBaseline = 'middle';
            context.textAlign = 'center';
            context.fillStyle = '#f00';
            context.fillText("专用章", width, height + 60);

            // 绘制公司名称
            context.save();
            context.translate(width, height);
            context.font = '26px 宋体';
            var count = companyName.length;
            var angle = 4 * Math.PI / (3 * (count - 1));
            var chars = companyName.split("");

            for (var i = 0; i < count; i++) {
                var c = chars;
                context.rotate(i === 0 ? (5 * Math.PI / 6) : angle);
                context.save();
                context.translate(80, 0);
                context.rotate(Math.PI / 2);
                context.fillText(c, 5, 0);
                context.restore();
            }
            context.restore();

            // 绘制防伪码
            context.save();
            context.translate(width, height );
            context.font = `${config.fontWeight05} ${config.fontSize05 * config.sealScale09}px ${config.fontFamily05}`;
            var securityCodeChars = securityCode.split("");
            var securityCodeLength = securityCodeChars.length;
            var securityCodeAngle = -4 * Math.PI / ((8.6 - config.fontGap05 * 0.4) * (securityCodeLength - 1)); //字间距；
            
            for (var i = 0; i < securityCodeLength; i++) {
                var cs = securityCodeChars;
                context.rotate(i === 0 ? -7.5 * Math.PI / 6 : securityCodeAngle); //首数字位置；
                context.save();
                context.translate(86 , 0);
                context.rotate(-Math.PI / 2);
                context.fillText(cs, 0, 0);
                context.restore();
            }
            context.restore();
        }

        function create5star(context, sx, sy, radius, color) {
            context.save();
            context.fillStyle = color;
            context.translate(sx, sy);
            context.rotate(Math.PI);
            context.beginPath();
            var x = Math.sin(0);
            var y = Math.cos(0);
            var dig = Math.PI / 5 * 4;
            for (var i = 0; i < 5; i++) {
                x = Math.sin(i * dig);
                y = Math.cos(i * dig);
                context.lineTo(x * radius, y * radius);
            }
            context.closePath();
            context.stroke();
            context.fill();
            context.restore();
        }

        // 实时更新画布内容
        function updateCanvas() {
            var companyName = document.getElementById('companyName').value;
            var securityCode = document.getElementById('securityCode').value;
            generateSeal(companyName, securityCode);
        }

        document.getElementById('companyName').addEventListener('input', updateCanvas);
        document.getElementById('securityCode').addEventListener('input', updateCanvas);

        // 初始化时绘制默认内容
        updateCanvas();
    </script>
</body>
</html>

外星星人 · 发表于 2024-8-13 14:06:07

感谢分享学习

精彩的鸟 · 发表于 2024-8-13 11:37:04

不是易语言的

xue9528 · 发表于 2024-8-13 11:29:59

感谢分享

ccfftt · 发表于 2024-8-13 11:27:21

要做出这样的才是王道

cqcc · 发表于 2024-8-13 11:15:21

本帖最后由 cqcc 于 2024-8-13 12:22 编辑

这个副标题（回帖专用章），目前是横向，改成有幅度的可以吗？就像(精易论坛源码区) 这几个字一样，挨着圆形转圈放到最下面。
就像8楼那个印章下面一部分一样怎么修改？

		自动登录	找回密码
密码			注册

[Web源码] 印章生成

点评