<template>
<div>
<canvas id="canvas" width="166" height="166"></canvas>
</div>
<template>
export default {
data () {
return {
isColor: 'red',//印章颜色
checked: '', // 横向文
checked1: '', // 下弦文
shape: 1, // 印章形状(1.方形 2.圆形 )
sealType: '3', // 印章类型(1.公章 2.法人章 3.财务专属章)
},
methods: {
//圆形印章
createSeal (id, company, name) {
let canvas = document.getElementById(id)
let context = canvas.getContext('2d')
// 绘画边框
let width = canvas.width / 2
let height = canvas.height / 2
context.lineWidth = 7
context.strokeStyle = this.isColor
context.beginPath()
context.arc(width, height, width - 7, 0, Math.PI * 2)
context.stroke()
// 画五角星
create5star(context, width, height, 10, this.isColor, 0)
// 绘制印章名称
context.font = '10px Helvetica'
context.textBaseline = 'middle'// 设置文本的垂直对齐方式
context.textAlign = 'center' // 设置文本的水平对对齐方式
context.lineWidth = 1
context.fillStyle = this.isColor
context.fillText(this.transverseWord, width, height + 40) // 绘画文字(横行文)
context.font = '8px Helvetica'
context.fillText(this.downWord, width, height + 60) // 绘画文字(下弦文)
// 绘制印章单位
context.translate(width, height)// 平移到此位置,
context.font = '14px Helvetica'
let count = company.length// 字数
let angle = 4 * Math.PI / (3 * (count - 1))// 字间角度
let chars = company.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(60, 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)
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.lineTo()
}
context.closePath()
context.stroke()
context.fill()
context.restore()
}
}，
//方形印章
createSealSquare（）{
// // 获取画布
let canvas = document.getElementById('canvas')
let context = canvas.getContext('2d')
let centerPoint = canvas.width / 2
// 名称
let personName = sealData.sealCompany || '李四'
// 字体
let fontFamily = 'Helvetica'
// 颜色
let color = this.isColor
// 边框线宽度
let personLineWidth = 4
// 字体大小
let personNameFontSize = 65
// 字与边框的距离
let lineTextGap = 0
let leftTopPointX = 2.4 * (personNameFontSize + lineTextGap)
let leftTopPointY = (personNameFontSize + lineTextGap)
// 矩形宽高
let wide = 2 * (personNameFontSize + lineTextGap)
let high = 2 * (personNameFontSize + lineTextGap)
// 字体加粗
let fontWeight = 'bold'
let textPoint = personNameFontSize / 2
let length = personName.length
if (length < 2 || length > 4) {
alert('名称只能为2~4个字符！')
throw new RangeError('名称只能为2~4个字符！')
}
if (typeof personName !== 'string') {
alert('只能是字符串！')
throw new TypeError('只能是字符串！')
}
switch (length) {
case 2:
personName += '之印'
break
case 3:
personName += '印'
break
}
context.save()
context.fillStyle = color
context.textBaseline = 'middle'
context.textAlign = 'center'
context.font = 'normal normal bold ' + personNameFontSize + 'px ' + fontFamily
context.translate(canvas.width / 2, canvas.width / 2)
context.fillText(personName.charAt(0), textPoint, -textPoint)
context.fillText(personName.charAt(1), textPoint, textPoint)
context.fillText(personName.charAt(2), -textPoint, -textPoint)
context.fillText(personName.charAt(3), -textPoint, textPoint)
context.restore()
// 绘制正方形
context.fillStyle = color
context.strokeStyle = this.isColor
context.lineWidth = 15
context.rect(0.5 * (canvas.width - 166), 0.5 * (canvas.height - 166), 166, 166)
context.stroke()
}，
// (方形印)
createSealSquareFinance (name) {
let canvas = document.getElementById('canvas')
let context = canvas.getContext('2d')
// 绘制正方形
context.lineWidth = 15
context.strokeStyle = this.isColor
context.strokeRect(0.5 * (canvas.width - 166), 0.5 * (canvas.height - 166), 166, 166)
// 绘制文字
context.fillStyle = this.isColor
context.textBaseline = 'middle'
context.textAlign = 'left'
context.font = 'normal normal bold 25px Helvetica'
context.translate(canvas.width / 2, canvas.width / 2)
context.fillText('财', -60, -45)
context.fillText('务', -60, -15)
context.fillText('专', -60, 15)
context.fillText('用', -60, 45)
context.font = 'normal normal bold 16px Helvetica'
context.translate(canvas.width / 2, canvas.width / 2)
let count = name.length// 字数
let y = -120
let x = -90
for (let i = 0; i < count; i++) {
if (x === -90) {
y = -120 + (i * 20)
} else if (x === -70) {
y = -120 + ((i - 5) * 20)
} else if (x === -50) {
y = -120 + ((i - 10) * 20)
} else if (x === -30) {
y = -120 + ((i - 15) * 20)
}
if (y === -20 && x === -90) { // 第一列的坐标
y = -120
x = -70
} else if (y === -20 && x === -70) { // 第二列的坐标
y = -120
x = -50
} else if (y === -20 && x === -50) { // 第三列的坐标
y = -120
x = -30
}
context.fillText(name[i], x, y)
}
},
}
网友评论