簽章 html
<template>
? <div>
? ? ?<canvas id="canvas" width="200" height="200"></canvas>
? ? </div>
</template>
<script>
import chapter from './config/chapter'
export default {
? ? mounted(){
? ? ? ? chapter('XXX專用章','XXX科技股份有限公司')
? ? }
}
</script>
簽章-JS封裝
let chapter = (text, companyName) => {
? let canvas = document.getElementById("canvas");
? let context = canvas.getContext("2d");
? //let text = "XXX專用章";
? //let companyName = "XXX科技股份有限公司";
? // 繪制印章邊框
? let width = canvas.width / 2;
? let 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"; //設(shè)置文本的垂直對齊方式
? context.textAlign = "center"; //設(shè)置文本的水平對對齊方式
? context.lineWidth = 1;
? context.strokeStyle = "#f00";
? context.strokeText(text, width, height + 60);
? // 繪制印章單位
? context.translate(width, height); // 平移到此位置,
? context.font = "23px 宋體";
? let count = companyName.length; // 字?jǐn)?shù)
? let angle = (4 * Math.PI) / (3 * (count - 1)); // 字間角度
? let chars = companyName.split("");
? let c;
? for (let 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); // 旋轉(zhuǎn)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); //移動坐標(biāo)原點
? ? context.rotate(Math.PI + rotato); //旋轉(zhuǎn)
? ? context.beginPath(); //創(chuàng)建路徑
? ? // let x = Math.sin(0);
? ? // let y = Math.cos(0);
? ? let dig = (Math.PI / 5) * 4;
? ? for (let i = 0; i < 5; i++) {
? ? ? //畫五角星的五條邊
? ? ? let x = Math.sin(i * dig);
? ? ? let y = Math.cos(i * dig);
? ? ? context.lineTo(x * radius, y * radius);
? ? }
? ? context.closePath();
? ? context.stroke();
? ? context.fill();
? ? context.restore();
? }
}
export default chapter;
