HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章

2020-04-21 23:46:48易采站长站整理

context.stroke();
context.fill();
context.restore();
}

</html>

椭圆


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>椭圆</title>

</head>
<body>
输入单位(支持最多14位,多了自己调):<input id="dw" width="50" type="text" value='测试印章椭圆科技有限公司公司'/>
<br>
输入单位(英文):<input id="edw" width="50" type="text" value='EASTPORTCOMPANY'/>
<br>
章下面文字:<input id="mdtext" width="50" type="text" value='公司章'/>

<div id="sealdiv" >
<canvas id="canvas" width="165" height="165"></canvas>
</div>
</div>
<input type="button" onclick="javascript:createSealEx();" value="生成中文公章"/>
<input type="button" onclick="javascript:createSealEx2();" value="生成中英公章"/>

<script>

function createSealEx(){
var dw = document.getElementById("dw");
var edw = document.getElementById("edw");
var mdtext = document.getElementById("mdtext");
var sealdiv = document.getElementById("sealdiv");
sealdiv.innerHTML ="<canvas id='canvas' width='165' height='165'></canvas>";
createSeal2('canvas',dw.value,mdtext.value);
}
function createSealEx2(){
var dw = document.getElementById("dw");
var edw = document.getElementById("edw");
var mdtext = document.getElementById("mdtext");
var sealdiv = document.getElementById("sealdiv");
sealdiv.innerHTML ="<canvas id='canvas' width='165' height='165'></canvas>";
createSeal1('canvas',dw.value,edw.value,mdtext.value);
}

function createSeal1(id,company,ecompany,name){
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.strokeStyle="red";//设置边框颜色
context.textBaseline = 'middle';//设置文本的垂直对齐方式
context.textAlign = 'center'; //设置文本的水平对对齐方式
context.lineWidth = 2;//椭圆1宽度
//3个参数: 左边距 上边据 宽度 椭圆扁度
BezierEllipse4(context, 85, 79, 79, 55); //椭圆1
context.lineWidth = 1;
BezierEllipse4(context, 85, 79, 76, 52); //椭圆2
context.lineWidth = 2;
BezierEllipse4(context, 85, 79, 63, 39); //椭圆3
// 绘制印章类型
context.font = 'bolder 10px SimSun';//设置字体大小 样式
context.fillStyle = 'red';//设置字体颜色
context.fillText(name,canvas.width/2+3,canvas.height/2+25);