<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>圆形公章</title>
</head>
<body>
<br>
输入单位（14位，多了自己调）：<input id="dw" width="50" type="text" value='*****传媒有限公司'/>
<br>
输入单位(英文)：<input id="edw" width="50" type="text" value='WTYRBCHFBBDHCBFVBDDD'/>
<br>
输入圈的个数：<input id="type" width="50" maxlength="2" type="number" value='1'/>
<br>
章下面文字：<input id="mdtext" width="50" type="text" value='471***10*8***3'/>
<div id="sealdiv" >
<canvas id="canvas" width="250" height="250"></canvas>
</div>
<input type="button" onclick="javascript:createSealEx();" value="生成中英公章"/>
<input type="button" onclick="javascript:createSealEx2();" value="生成中公章"/>
<div id="tuzhangdiv"></div>
</body>
<script src="./jquery.min.js"></script>
<script LANGUAGE="javascript">
// 颠倒
function reverseString(str) {
return str.split('').reverse().join('');
}
function createSealEx(){
var dw = document.getElementById("dw");
var edw = document.getElementById("edw");
var mdtext = document.getElementById("mdtext");
var type= document.getElementById("type");
// 文字倒叙排放
let mdtextVal = reverseString(mdtext.value);
var tuzhangdiv = document.getElementById("tuzhangdiv");
tuzhangdiv.innerHTML ="<canvas id='canvas' width='160' height='160'></canvas>";
createSeal('canvas',dw.value,edw.value,mdtextVal,type); // type = 1 一个圈
}
// 生成中英公章
function createSealEx2(){
var dw = document.getElementById("dw");
var edw = document.getElementById("edw");
var mdtext = document.getElementById("mdtext");
// 文字倒叙排放
let mdtextVal = reverseString(mdtext.value);
var type= document.getElementById("type");
var tuzhangdiv = document.getElementById("tuzhangdiv");
tuzhangdiv.innerHTML ="<canvas id='canvas' width='160' height='160'></canvas>";
createSeal11('canvas',dw.value,mdtextVal,type);
}
// 生成中公章
function createSeal11(id,company,name,type){
var canvas = document.getElementById(id);
var context = canvas.getContext('2d');
// 绘制印章边框
var width=canvas.width/2;
var height=canvas.height/2;
context.lineWidth=2;
context.strokeStyle="#f00";
context.beginPath();
context.arc(width,height,78,0,Math.PI*2);
context.stroke();
context.save();
if (type== 2){
context.lineWidth=1;
context.strokeStyle="#f00";
context.beginPath();
context.arc(width,height,75,0,Math.PI*2);
context.stroke();
context.save();
}
//画五角星
create5star(context,width,height,25,"#f00",0);
// 绘制印章名称
context.font = 'bolder 18px Helvetica';
context.textBaseline = 'middle';//设置文本的垂直对齐方式
context.textAlign = 'center'; //设置文本的水平对对齐方式
context.lineWidth=1;
context.fillStyle = '#f00';
// context.fillText(name,width,height+53);
// 绘制印章单位
context.translate(width,height);// 平移到此位置,
context.font = '20px Helvetica'
var count = company.length;// 字数
var angle = 4*Math.PI/(3*(count - 1));// 字间角度
var chars = company.split("");
var c;
for (var i = 0; i < count; i++){
c = chars[i];// 需要绘制的字符
if(i==0)
context.rotate(5*Math.PI/6);
else
context.rotate(angle);
context.save();
context.translate(64, 0);// 平移到此位置,此时字和x轴垂直
context.rotate(Math.PI/2);// 旋转90度,让字平行于x轴
context.fillText(c,0, 5);// 此点为字的中心点
context.restore();
}
//绘制印编码
context.translate(width-125,height-125);// 平移到此位置,
context.font = 'bolder 12px SimSun';
var ecount1 = name.length;// 字数
var eangle1 = (5*Math.PI)/(3*(ecount1+32));// 字间角度 +数值缩短字间距
var echars1 = name.split("");
var ec1;
for (var j = 0; j < ecount1; j++){
ec1 = echars1[j];// 需要绘制的字符
if(j==0)
context.rotate(6*Math.PI/7+3.9); // 加角度 越大越往右 +3.5 比3.8 更靠右
else
context.rotate(eangle1);
context.save();
// 平移到此位置,此时字和x轴垂直，第一个参数是与圆外边的距离，越大距离越近
context.translate(62, 0); // 距离底部的距离（或者圈的距离） 越大越往外
context.rotate(-Math.PI/2);// 旋转90度,让字平行于x轴
context.fillText(ec1,0, 4.8);// 此点为字的中心点
context.restore();
}
}
function createSeal(id,company,ecompany,name,type){
var canvas = document.getElementById(id);
var context = canvas.getContext('2d');
context.translate(0,0);//移动坐标原点
// 绘制印章边框
var width=canvas.width/2;
var height=canvas.height/2;
//边框1
context.lineWidth=2;
context.strokeStyle="#f00";
context.beginPath();
context.arc(width,height,78,0,Math.PI*2);
context.stroke();
context.save();
if (type== 2){
context.lineWidth=1;
context.strokeStyle="#f00";
context.beginPath();
context.arc(width,height,63,0,Math.PI*2);
context.stroke();
context.save();
}
//画五角星
create5star(context,width,height,20,"#f00",0);
// 绘制印章类型
context.font = 'bolder 15px SimSun';
context.textBaseline = 'middle';//设置文本的垂直对齐方式
context.textAlign = 'center'; //设置文本的水平对对齐方式
context.lineWidth=1;
context.fillStyle = '#f00';
// context.fillText(name,width,height+50);
// 绘制印章中文单位
context.translate(width,height);// 平移到此位置,
context.font = 'bolder 18px SimSun'
var count = company.length;// 字数
var angle = 4*Math.PI/(3*(count-1));// 字间角度
var chars = company.split("");
var c;
for (var i = 0; i < count; i++){
c = chars[i];// 需要绘制的字符
if(i==0)
context.rotate(5*Math.PI/6);
else
context.rotate(angle);
context.save();
// 平移到此位置,此时字和x轴垂直，第一个参数是与圆外边的距离，越大距离越近
context.translate(52, 0);
context.rotate(Math.PI/2);// 旋转90度,让字平行于x轴
context.fillText(c,0, 5);// 此点为字的中心点
context.restore();
}
//绘制印章英文单位
// context.translate(width-125,height-125);// 平移到此位置,
// context.font = 'bolder 10px SimSun';
// var ecount = ecompany.length;// 字数
// var eangle = (5*Math.PI)/(3*(ecount));// 字间角度
// var echars = ecompany.split("");
// var ec;
// for (var j = 0; j < ecount; j++){
// ec = echars[j];// 需要绘制的字符
// if(j==0)
// context.rotate(6*Math.PI/7-1);
// else
// context.rotate(eangle);
// context.save();
// // 平移到此位置,此时字和x轴垂直，第一个参数是与圆外边的距离，越大距离越近
// context.translate(74, 0);
// context.rotate(Math.PI/2);// 旋转90度,让字平行于x轴
// context.fillText(ec,0, 4.8);// 此点为字的中心点
// context.restore();
// }
//绘制印编码
context.translate(width-125,height-125);// 平移到此位置,
context.font = 'bolder 10px SimSun';
var ecount1 = name.length;// 字数
var eangle1 = (5*Math.PI)/(3*(ecount1+25));// 字间角度
var echars1 = name.split("");
var ec1;
for (var j = 0; j < ecount1; j++){
ec1 = echars1[j];// 需要绘制的字符
if(j==0)
context.rotate(6*Math.PI/7+3.8);
else
context.rotate(eangle1);
context.save();
// 平移到此位置,此时字和x轴垂直，第一个参数是与圆外边的距离，越大距离越近
context.translate(65, 0);
context.rotate(-Math.PI/2);// 旋转90度,让字平行于x轴
context.fillText(ec1,0, 4.8);// 此点为字的中心点
context.restore();
}
}
//绘制五角星
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>
</html>本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
