image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
input{height: 38px;width: 200px; }
</style>
<body>
<canvas id="canvas" width="250" height="250"></canvas>
<img src="" alt="" />
<!-- 圖片要保存在電腦里才能轉(zhuǎn)換成png ， 如果要傳給后臺(tái)base64 ,則在 toDataURL().substring(22) -->
<div>
<input type="text" name="" placeholder="請(qǐng)輸入單位名稱 字?jǐn)?shù)不超過15個(gè)" id="sealinstitution" value="廣州市電腦計(jì)算機(jī)科技有限公司"/>
<input type="text" name="" placeholder="請(qǐng)輸入備注內(nèi)容 字?jǐn)?shù)不超過5個(gè)" id="sealremark" maxlength="5" value="系統(tǒng)專用章"/>
<button class="productseal">生成公章</button>
<button class="getseal">生成圖片</button>
</div>
</body>
<script type="text/javascript">
document.querySelector('.productseal').addEventListener("click",function(){
var sealinstitution = document.getElementById('sealinstitution').value;
var sealremark = document.getElementById('sealremark').value;
createSeal('canvas',sealinstitution,sealremark);
})
document.querySelector('.getseal').addEventListener("click",function(){
document.getElementById('canvas').toDataURL("image/png");
console.log( document.getElementById('canvas').toDataURL("image/png") );
document.querySelector("img").src = document.getElementById('canvas').toDataURL("image/png");
})
var maxLength = 15;
function createSeal(id,company,name){
var canvas = document.getElementById(id);
var context = canvas.getContext('2d');
// 繪制印章邊框
var width=canvas.width/2;
var height=canvas.height/2;
context.lineWidth=4;//邊框?qū)挾? context.strokeStyle="#f00";//邊框顏色
context.beginPath();
context.arc(width,height,110,0,Math.PI*2);
context.stroke();
//畫五角星
create5star(context,width,height,30,"#f00",0);
// 繪制印章名稱
context.font = '22px Helvetica';
context.textBaseline = 'middle';//設(shè)置文本的垂直對(duì)齊方式
context.textAlign = 'center'; //設(shè)置文本的水平對(duì)對(duì)齊方式
context.lineWidth=1;
context.fillStyle = '#f00';
context.fillText(name,width,height+65);
// 繪制印章單位
context.translate(width,height);// 平移到此位置,
context.font = '26px Helvetica'//字號(hào)
var count = company.length;// 字?jǐn)?shù)
var angle = (4*Math.PI/(3*(maxLength- 1)))+0.02;// 字間角度 字間距 +0.02~0.04
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);
context.rotate( 3*Math.PI/2-angle*(count-1)/2 );//第一個(gè)字的位置
else
context.rotate(angle);
context.save();
context.translate(90, 0);// 平移到此位置,此時(shí)字和x軸垂直
context.rotate(Math.PI/2);// 旋轉(zhuǎn)90度,讓字平行于x軸
context.fillText(c,0, 5);// 此點(diǎn)為字的中心點(diǎn)
context.restore();
}
//繪制五角星
/**
* 創(chuàng)建一個(gè)五角星形狀. 該五角星的中心坐標(biāo)為(sx,sy),中心到頂點(diǎn)的距離為radius,rotate=0時(shí)一個(gè)頂點(diǎn)在對(duì)稱軸上
* rotate:繞對(duì)稱軸旋轉(zhuǎn)rotate弧度
*/
function create5star(context,sx,sy,radius,color,rotato){
context.save();
context.fillStyle=color;
context.translate(sx,sy);//移動(dòng)坐標(biāo)原點(diǎn)
context.rotate(Math.PI+rotato);//旋轉(zhuǎn)
context.beginPath();//創(chuàng)建路徑
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>
