印章生成 - 精易论坛 - Powered by Discuz!

精易论坛

标题:

作者:

时间:

标题:

本帖最后由 kike 于 2024-8-13 10:02 编辑

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

<!doctype html>

<html lang="en">

<head>

<meta charset="GBK">

<title></title>

</head>

<body>

<p style="display:none;">

<canvas id="canvas" width="300" height="300"></canvas>

</p>

<script>

var canvas = document.getElementById("canvas");  

var context = canvas.getContext('2d');

var text = "";//业务专用章

var companyName = "揭阳市揭东区精易科技有限公司";

// 绘制印章边框

var width = canvas.width / 2;

var height = canvas.height / 2;

context.lineWidth = 5;

context.strokeStyle = "#FF0000";

context.beginPath();

context.arc(width, height, 100, 0, Math.PI * 2);//宽、高、半径

context.stroke();

//画五角星

create5star(context,width,height,25,"#FF0000",0);

 // 绘制印章名称

 context.font = '20px 宋体';

 context.textBaseline = 'middle';//设置文本的垂直对齐方式

 context.textAlign = 'center'; //设置文本的水平对对齐方式

 context.lineWidth=1;

 //context.strokeStyle = '#FF0000';

 //context.strokeText(text,width,height+60);

 context.fillStyle = '#FF0000';

 context.fillText(text,width,height+60);

 // 绘制印章单位

 context.translate(width,height);// 平移到此位置,

 context.font = '24px 宋体'

 var  count = companyName.length;// 字数

 var  angle = 4*Math.PI/(3*(count - 1));// 字间角度

 var chars = companyName.split("");

 var c;

for (var i = 0; i < count; i++) {

 c = chars;// 需要绘制的字符

 if (i == 0) {

  context.rotate(5 * Math.PI / 6);

 } else{

  context.rotate(angle);

 }

 context.save();

 context.translate(100-20, 0);// 平移到此位置,此时字和x轴垂直，公司名称和最外圈的距离

 context.rotate(Math.PI / 2);// 旋转90度,让字平行于x轴

//context.strokeText(c, 0, 0);// 此点为字的中心点

 context.fillText(c, 0, 0);// 此点为字的中心点

 context.restore();

}

//绘制五角星  

/** 

* 创建一个五角星形状. 该五角星的中心坐标为(sx,sy),中心到顶点的距离为radius,rotate=0时一个顶点在对称轴上 

* rotate:绕对称轴旋转rotate弧度 

*/

 function create5star(context, sx, sy, radius, color, rotato) {

context.save();

context.fillStyle = color;

context.translate(sx, sy);//移动坐标原点

context.rotate(Math.PI + rotato);//旋转

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++) {//画五角星的五条边

var x = Math.sin(i * dig);

var y = Math.cos(i * dig);

context.lineTo(x * radius, y * radius);

}

context.closePath();

context.stroke();

context.fill();

context.restore();

 }

</script>



<script>

window.onload = function () {

var drawing = document.getElementById('canvas')

//确定浏览器支持<canvas>元素

if (drawing.getContext) {

var context = drawing.getContext('2d')

console.log(context)

//取得图像的数据 URI

var imgURI = drawing.toDataURL("image/png");                

//显示图像

var image = document.createElement("img");

image.src = imgURI;

document.body.appendChild(image);

         var testspan=document.getElementById('span');

testspan.innerText="<p>"+imgURI+"</p>";

}

}

</script>

<span style="display:none;" id="span"></span>

</body>

</html>

作者: Joway666 时间: 2024-8-13 10:29
感谢分享

作者: 随心o 时间: 2024-8-13 10:36
少了个印章编号

作者: 1253363143 时间: 2024-8-13 10:43
6666666666666666

作者: FanLi 时间: 2024-8-13 10:50
这个不错，学习一下。

作者: jtucar 时间: 2024-8-13 10:57
支持开源~！感谢分享

作者: cqcc 时间: 2024-8-13 11:15
本帖最后由 cqcc 于 2024-8-13 12:22 编辑

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

作者: ccfftt 时间: 2024-8-13 11:27

要做出这样的才是王道

作者: xue9528 时间: 2024-8-13 11:29
感谢分享

作者: 精彩的鸟 时间: 2024-8-13 11:37
不是易语言的

作者: 外星星人 时间: 2024-8-13 14:06
感谢分享学习

作者: kike 时间: 2024-8-13 14:09
本帖最后由 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 15:20
膜拜大佬

作者: kyo9766 时间: 2024-8-13 15:34
膜拜，感谢分享

作者: cqcc 时间: 2024-8-13 15:37

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

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

作者: wgqxj 时间: 2024-8-13 15:50
谢谢分享

作者: xmtian 时间: 2024-8-13 16:03
感谢分享。

作者: kike 时间: 2024-8-13 17:25
本帖最后由 kike 于 2024-8-13 17:26 编辑

cqcc 发表于 2024-8-13 15:37
我打开就是两个输入框，输入文字怎么没有变化呢？

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

 // 绘制防伪码       var securityCode = "1234567890123";

        context.save();

        context.translate(width, height);

        context.font = '12px 楷体';

        var securityCodeChars = securityCode.split("");

        var securityCodeLength = securityCodeChars.length;

        var securityCodeAngle = -4 * Math.PI / ((8.6 - 0.4 * 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(90, 0); // 环绕

            context.rotate(-Math.PI / 2);

            context.fillText(cs, 0, 0);

            context.restore();

        }

        context.restore();

作者: cqcc 时间: 2024-8-13 18:33

kike 发表于 2024-8-13 17:25
[mw_shl_code=javascript,true] // 绘制防伪码 var securityCode = "1234567890123";
conte ...

其实我就是想把 https://www.eyuyan.la/post/17055.html 这个例子的印章下面副标题改为带弧度的，能不能帮忙改一下代码，谢谢！

作者: bianyuan456 时间: 2024-8-13 21:17
已经顶贴，感谢您对论坛的支持！

作者: 艾玛克138 时间: 2024-8-13 22:04
刚好学到这，东西拿走

作者: kike 时间: 2024-8-13 22:24
本帖最后由 kike 于 2024-8-15 18:20 编辑

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

 // 绘制印章名称

 context.font = '20px 宋体';

 context.textBaseline = 'middle';//设置文本的垂直对齐方式

 context.textAlign = 'center'; //设置文本的水平对对齐方式

 context.lineWidth=1;

 context.fillStyle = '#FF0000';

context.save();

context.translate(width, height);

context.font = '20px 宋体';

var text='回贴专用章';

var count = text.length;

var angle = -3 * Math.PI / (8 * (count - 1));

var chars = text.split("");

for (var i = 0; i < count; i++) {

    var c = chars;

    context.rotate(i === 0 ? (-7.8 * Math.PI / 6) : angle);

    context.save();

    context.translate(80, 0);

    context.rotate(-Math.PI / 2);//旋转图形

    context.fillText(c, 0, 0);

    context.restore();

}

89.zip (1.76 KB, 下载次数: 8)

作者: year1970 时间: 2024-8-14 07:52
感谢分享

作者: renhe2018 时间: 2024-8-14 08:33
不错呀，效果杠杠的。

作者: 一指温柔 时间: 2024-8-14 09:25
支持开源~！感谢分享

作者: 吃柠檬的包子 时间: 2024-8-14 09:25
可以这创意不错

作者: 396384183 时间: 2024-8-14 10:15
感谢分享，很给力！~

作者: benbenyw 时间: 2024-8-14 14:54
面向监狱编程？

作者: 深圳梦 时间: 2024-8-14 16:14
支持开源~！感谢分享

作者: jyfinn 时间: 2024-8-15 06:21
开源精神必须支持~

作者: pq9999 时间: 2024-8-28 22:31
感谢分享

作者: 刺痛的伤009 时间: 2024-8-29 17:16

支持下随便收藏了

作者: nfy1981 时间: 2024-9-10 17:30
不错不错不错不错不错不错不错不错不错不错不错不错不错

作者: sampo 时间: 2024-9-30 20:36
来晚了，前天着急用害的我用ps做了一个。

作者: keaiqian 时间: 2024-10-12 17:59
666666666666666666666

作者: 熊不熊 时间: 2024-12-4 18:40
感谢分享，很给力！~

作者: 15111521472 时间: 2025-6-6 20:54
6666666666666666666666666666666

欢迎光临精易论坛 (https://125.confly.eu.org/)