vue项目
页面调用
<canvas id="canvas" width="130" height="130"></canvas>
import createSeal from '@/utils/chapter'
export default {
mounted() {
createSeal('canvas', '全国工业交流会暨工业产品展览会', '组委会')
},
}
chapter.js
const maxLength = 16;
function createSeal (id, company, name) {
console.log('company', company)
var canvas = document.getElementById(id);
var context = canvas.getContext('2d');
// 绘制印章边框
var width = canvas.width / 2;
var height = canvas.height / 2;
context.lineWidth = 4;//边框宽度
context.strokeStyle = "#f00";//边框颜色
context.beginPath();
context.arc(width, height, 60, 0, Math.PI * 2);//宽、高、半径
context.stroke();
//画五角星
create5star(context, width, height, 16, "#f00", 0);
// 绘制印章名称
context.font = '20px STSong';
context.textBaseline = 'middle';//设置文本的垂直对齐方式
context.textAlign = 'center'; //设置文本的水平对对齐方式
context.lineWidth = 1;
context.fillStyle = '#f00';
context.fillText(name, width + 2, height + 40);
// context.fillText(name,width,height+65);
// 绘制印章单位
context.translate(width, height);// 平移到此位置,
context.font = '14px STSong'//字号
var count = company.length;// 字数
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);//第一个字的位置
else
context.rotate(angle);
context.save();
context.translate(54, 0);// 平移到此位置,此时字和x轴垂直
context.rotate(Math.PI / 2);// 旋转90度,让字平行于x轴
context.fillText(c, 0, 5);// 此点为字的中心点
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();//创建路径
// let x = Math.sin(0);
// let y= Math.cos(0);
var dig = Math.PI / 5 * 4;
for (var i = 0; i < 5; i++) {//画五角星的五条边
var starX = Math.sin(i * dig);
var starY = Math.cos(i * dig);
context.lineTo(starX * radius, starY * radius);
}
context.closePath();
context.stroke();
context.fill();
context.restore();
}
}
export default createSeal
原生html
<!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="130" height="130"></canvas>
<img src="" alt="" />
<!-- 图片要保存在电脑里才能转换成png ， 如果要传给后台base64 ,则在 toDataURL().substring(22) -->
<div>
<input type="text" name="" placeholder="请输入单位名称 字数不超过15个" id="sealinstitution" value="全国工业交流会暨工业产品展览会" />
<input type="text" name="" placeholder="请输入备注内容 字数不超过5个" id="sealremark" maxlength="5" value="组委会" />
<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");
})
const maxLength = 16;
function createSeal(id, company, name) {
console.log('company', company)
var canvas = document.getElementById(id);
var context = canvas.getContext('2d');
// 绘制印章边框
var width = canvas.width / 2;
var height = canvas.height / 2;
context.lineWidth = 4;//边框宽度
context.strokeStyle = "#f00";//边框颜色
context.beginPath();
context.arc(width, height, 60, 0, Math.PI * 2);//宽、高、半径
context.stroke();
//画五角星
create5star(context, width, height, 16, "#f00", 0);
// 绘制印章名称
context.font = '20px STSong';
context.textBaseline = 'middle';//设置文本的垂直对齐方式
context.textAlign = 'center'; //设置文本的水平对对齐方式
context.lineWidth = 1;
context.fillStyle = '#f00';
context.fillText(name, width + 2, height + 40);
// context.fillText(name,width,height+65);
// 绘制印章单位
context.translate(width, height);// 平移到此位置,
context.font = '14px STSong'//字号
var count = company.length;// 字数
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);//第一个字的位置
else
context.rotate(angle);
context.save();
context.translate(54, 0);// 平移到此位置,此时字和x轴垂直
context.rotate(Math.PI / 2);// 旋转90度,让字平行于x轴
context.fillText(c, 0, 5);// 此点为字的中心点
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();//创建路径
// let x = Math.sin(0);
// let y= Math.cos(0);
var dig = Math.PI / 5 * 4;
for (var i = 0; i < 5; i++) {//画五角星的五条边
var starX = Math.sin(i * dig);
var starY = Math.cos(i * dig);
context.lineTo(starX * radius, starY * radius);
}
context.closePath();
context.stroke();
context.fill();
context.restore();
}
}
</script>
</html>
效果如下：
截屏2020-09-29下午8.17.31.png
网友评论