77 lines
2.7 KiB
JavaScript
77 lines
2.7 KiB
JavaScript
let chapter = (text, companyName) => {
|
||
let canvas = document.getElementById('canvas')
|
||
if (canvas != null) {
|
||
let context = canvas.getContext('2d')
|
||
|
||
//let text = "XXX专用章";
|
||
//let companyName = "XXX科技股份有限公司";
|
||
|
||
// 绘制印章边框
|
||
let width = canvas.width / 2
|
||
let height = canvas.height / 2
|
||
context.lineWidth = 1 // 边框宽度
|
||
context.strokeStyle = '#f00'
|
||
context.beginPath()
|
||
context.arc(width, height, 90, 0, Math.PI * 2) //宽、高、半径
|
||
context.stroke()
|
||
|
||
//画五角星
|
||
create5star(context, width, height, 30, '#f00', 0)
|
||
|
||
// 绘制印章名称
|
||
context.font = '16px 宋体'
|
||
context.textBaseline = 'middle' //设置文本的垂直对齐方式
|
||
context.textAlign = 'center' //设置文本的水平对对齐方式
|
||
context.lineWidth = 1
|
||
// context.strokeStyle = '#f00'
|
||
context.fillStyle = '#f00'
|
||
context.fillText(text, width, height + 45)
|
||
|
||
// 绘制印章单位
|
||
context.translate(width, height) // 平移到此位置,
|
||
context.font = '16px 宋体'
|
||
let count = companyName.length // 字数
|
||
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(80, 0) // 平移到此位置,此时字和x轴垂直，公司名称和最外圈的距离
|
||
context.rotate(Math.PI / 2) // 旋转90度,让字平行于x轴
|
||
context.fillText(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() //创建路径
|
||
// 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
|