canvas实现电子印章

<template>
    <div> 
        <canvas id="canvas" width="200" height="200"></canvas>
    </div>
</template>

<script>
export default {
    name: "chapter",
    data() {
        return {};
    },
    mounted() {
        this.chapter('XX专用章','xxxx公司')
    },
    methods: {
        chapter(text, companyName, id) {
            let canvas = document.getElementById("canvas");
            if(canvas) {
                let context = canvas.getContext("2d");
            
                // 绘制印章边框
                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();
            
                //画五角星
                this.create5star(context, width, height, 25, "#f00", 0);
            
                // 绘制印章名称
                context.font = "20px 宋体";
                context.textBaseline = "middle"; //设置文本的垂直对齐方式
                context.textAlign = "center"; //设置文本的水平对对齐方式
                context.lineWidth = 1;
                context.strokeStyle = "#f00";
                context.strokeText(text, width, height + 60);
            
                // 绘制印章单位
                context.translate(width, height); // 平移到此位置,
                context.font = "23px 宋体";
                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(70, 0); // 平移到此位置,此时字和x轴垂直，公司名称和最外圈的距离
                context.rotate(Math.PI / 2); // 旋转90度,让字平行于x轴
                context.strokeText(c, 0, 0); // 此点为字的中心点
                context.restore();
            }
            }
        },
        /**
         * 绘制五角星
         */
        create5star(context, sx, sy, radius, color, rotato) {
            context.save();
            context.fillStyle = color;
            context.translate(sx, sy); //移动坐标原点
            context.rotate(Math.PI + rotato); //旋转
            context.beginPath(); //创建路径
            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();
        }
    }
};
</script>

效果如下：

参考链接：

vue实现电子印章效果_vue实现盖章功能-CSDN博客