<html>
<head>
<meta charset="utf-8">
</head>
<style type="text/css" name="文字盖章">
.seal-content{
width: 300px;
min-height: 60px;
vertical-align: bottom;
word-wrap: break-word;
position: relative;
}
.seal-result{
width: 60px;
height: 60px;
transform: rotate(30deg);
border: solid 2px green;
border-radius: 100%;
text-align: center;
color: green;
font-size: 16px;
font-weight: bold;
line-height: 60px;
right: 5px;
bottom: 0px;
position: absolute;
background-color: rgba(255,255,255,0.8)
}
.seal-result-fail{
border-color: red;
color: red;
}
</style>
<body>
<canvas id="canvas" width="200" height="200"></canvas>
</body>
<script name="自定义印章">
var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');
var text = "XXX专用章";
var companyName = "XXX科技股份有限公司";
// 绘制印章边框
var width = canvas.width / 2;
var height = canvas.height / 2;
context.lineWidth = 5;
context.strokeStyle = "#f00";
context.beginPath();
context.arc(width, height, 90, 0, Math.PI * 2);//宽、高、半径
context.stroke();
//画五角星
create5star(context,width,height,25,"#f00",0);
// 绘制印章名称
context.font = '20px 宋体';
context.textBaseline = 'middle';//设置文本的垂直对齐方式
context.textAlign = 'center'; //设置文本的水平对对齐方式
context.lineWidth=1;
context.strokeStyle = '#f00';
context.strokeText(text,width,height+60);
// 绘制印章单位
context.translate(width,height);// 平移到此位置,
context.font = '23px 宋体';
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[i];// 需要绘制的字符
if (i == 0) {
context.rotate(5 * Math.PI / 6);
} else{
context.rotate(angle);
}
context.save();
context.translate(70, 0);// 平移到此位置,此时字和x轴垂直，公司名称和最外圈的距离
context.rotate(Math.PI / 2);// 旋转90度,让字平行于x轴
context.strokeText(c, 0, 0);// 此点为字的中心点
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>
<template>
<div class="page">
<div id="main" class="main">
<canvas id="canvas" width="200" height="200"></canvas>
</div>
</div>
</template>
<script>
export default {
name: "Home",
data() {
return {
orgName: '长沙市第一中学'
}
},
components: {},
created() {
},
mounted() {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
// 绘制印章边框
var width = canvas.width / 2;
var height = canvas.height / 2;
context.lineWidth = 3;
context.strokeStyle = "#f00";
context.beginPath();
// 圆圈大小
context.arc(width, height, 80, 0, Math.PI * 2);
context.stroke();
//画五角星
this.create5star(context, width, height, 15, "#f00", 0);
// 绘制印章名称
context.font = '16px Helvetica';
context.textBaseline = 'middle';//设置文本的垂直对齐方式
context.textAlign = 'center'; //设置文本的水平对对齐方式
context.lineWidth = 1;
context.fillStyle = '#f00';
let name = "验收专用章"
context.fillText(name, width, height + 45);
// 绘制印章单位
context.translate(width, height);// 平移到此位置,
context.font = '16px Helvetica'
var count = this.orgName.length;// 字数
var angle = 4 * Math.PI / (3 * (count - 1));// 字间角度
var chars = this.orgName.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(70, 0);// 平移到此位置,此时字和x轴垂直
context.rotate(Math.PI / 2);// 旋转90度,让字平行于x轴
context.fillText(c, 0, 5);// 此点为字的中心点
context.restore();
}
},
methods: {
//绘制五角星
/**
* 创建一个五角星形状. 该五角星的中心坐标为(sx,sy),中心到顶点的距离为radius,rotate=0时一个顶点在对称轴上
* rotate:绕对称轴旋转rotate弧度
*/
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>
<style scoped>
</style>
浙公网安备 33010602011771号