bonus-ui/src/utils/chapter.js

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