html 生成印章 

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <style type="text/css" name="文字盖章">
    
        .seal-content{
            width: 300px;
            min-height: 60px;
            vertical-align: bottom;
            word-wrap: break-word;
            position: relative;
        }
        
        .seal-result{
            width: 60px;
            height: 60px;
            transform: rotate(30deg);
            border: solid 2px green;
            border-radius: 100%;
            text-align: center;
            color: green;
            font-size: 16px;
            font-weight: bold;
            line-height: 60px;
            right: 5px;
            bottom: 0px;
            position: absolute;
            background-color: rgba(255,255,255,0.8)
        }
        
        .seal-result-fail{
            border-color: red;
            color: red;
        }
    </style>
    
    <body>
        
        
        <canvas id="canvas" width="200" height="200"></canvas>
        
    </body>
    
    <script name="自定义印章">
 
       var canvas = document.getElementById("canvas");
       var context = canvas.getContext('2d');
 
       var text = "XXX专用章";
       var companyName = "XXX科技股份有限公司";
 
       // 绘制印章边框
       var width = canvas.width / 2;
       var 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';//设置文本的垂直对齐方式
        context.textAlign = 'center'; //设置文本的水平对对齐方式
        context.lineWidth=1;
        context.strokeStyle = '#f00';
        context.strokeText(text,width,height+60);
 
        // 绘制印章单位  
        context.translate(width,height);// 平移到此位置,
        context.font = '23px 宋体';
        var  count = companyName.length;// 字数
        var  angle = 4*Math.PI/(3*(count - 1));// 字间角度 
        var chars = companyName.split("");
        var c;
       for (var 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();
       }
 
       //绘制五角星
        function create5star(context, sx, sy, radius, color, rotato) {
            context.save();
            context.fillStyle = color;
            context.translate(sx, sy);//移动坐标原点
            context.rotate(Math.PI + rotato);//旋转
            context.beginPath();//创建路径
            var x = Math.sin(0);
            var y = Math.cos(0);
            var dig = Math.PI / 5 * 4;
            for (var i = 0; i < 5; i++) {//画五角星的五条边
                var x = Math.sin(i * dig);
                var y = Math.cos(i * dig);
                context.lineTo(x * radius, y * radius);
            }
            context.closePath();
            context.stroke();
            context.fill();
            context.restore();
        }
 
</script>
    
    
    
</html>



 

 

 

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

<script>
    export default {
        name: "Home",
        data() {
            return {
                orgName: '长沙市第一中学'
            }
        },
        components: {},
        created() {

        },
        mounted() {
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');
            // 绘制印章边框
            var width = canvas.width / 2;
            var height = canvas.height / 2;
            context.lineWidth = 3;
            context.strokeStyle = "#f00";
            context.beginPath();
            // 圆圈大小
            context.arc(width, height, 80, 0, Math.PI * 2);
            context.stroke();

            //画五角星
            this.create5star(context, width, height, 15, "#f00", 0);

            // 绘制印章名称
            context.font = '16px Helvetica';
            context.textBaseline = 'middle';//设置文本的垂直对齐方式
            context.textAlign = 'center'; //设置文本的水平对对齐方式
            context.lineWidth = 1;
            context.fillStyle = '#f00';
            let name = "验收专用章"
            context.fillText(name, width, height + 45);

            // 绘制印章单位
            context.translate(width, height);// 平移到此位置,
            context.font = '16px Helvetica'
            var count = this.orgName.length;// 字数
            var angle = 4 * Math.PI / (3 * (count - 1));// 字间角度
            var chars = this.orgName.split("");
            var c;
            for (var 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.fillText(c, 0, 5);// 此点为字的中心点
                context.restore();
            }
        },
        methods: {
            //绘制五角星
            /**
             * 创建一个五角星形状. 该五角星的中心坐标为(sx,sy),中心到顶点的距离为radius,rotate=0时一个顶点在对称轴上
             * rotate:绕对称轴旋转rotate弧度
             */
            create5star(context, sx, sy, radius, color, rotato) {
              context.save();
              context.fillStyle = color;
              context.translate(sx, sy);//移动坐标原点
              context.rotate(Math.PI + rotato);//旋转
              context.beginPath();//创建路径
              var x = Math.sin(0);
              var y = Math.cos(0);
              var dig = Math.PI / 5 * 4;
              for (var i = 0; i < 5; i++) {//画五角星的五条边
                  var x = Math.sin(i * dig);
                  var y = Math.cos(i * dig);
                  context.lineTo(x * radius, y * radius);
              }
              context.closePath();
              context.stroke();
              context.fill();
              context.restore();
          }
        }
    }
</script>

<style scoped>
</style>

 

posted @ 2021-10-22 11:56  漫步CODE人生  阅读(523)  评论(0)  编辑  收藏  举报
无