印章生成

kike · 发表于 2024-8-13 09:55:44

本帖最后由 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>

nfy1981 · 发表于 2024-9-10 17:30:58

不错不错不错不错不错不错不错不错不错不错不错不错不错

刺痛的伤009 · 发表于 2024-8-29 17:16:36

支持下随便收藏了

pq9999 · 发表于 2024-8-28 22:31:21

感谢分享

cloud99 · 发表于 2024-8-15 06:21:09

开源精神必须支持~

深圳梦 · 发表于 2024-8-14 16:14:12

支持开源~！感谢分享

benbenyw · 发表于 2024-8-14 14:54:04

面向监狱编程？

396384183 · 发表于 2024-8-14 10:15:12

感谢分享，很给力！~

吃柠檬的包子 · 发表于 2024-8-14 09:25:24

可以这创意不错

一指温柔 · 发表于 2024-8-14 09:25:05

支持开源~！感谢分享

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

[Web源码] 印章生成

点评

评分