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>
        <div class="seal-content">
            通过的内容
            通过的内容
            通过的内容
            通过的内容
            通过的内容
            通过的内容
            通过的内容
            通过的内容
            通过的内容
            通过的内容
            通过的内容
            <div class="seal-result">通过</div>
        </div>
 
        <div class="seal-content">
            不通过的内容
            不通过的内容
            不通过的内容
            不通过的内容
            不通过的内容
            不通过的内容
            不通过的内容
            不通过的内容
            不通过的内容  
            不通过的内容
            <div class="seal-result seal-result-fail">不通过</div>
        </div>

        <div class="seal-content">
            <img src="https://gss0.bdstatic.com/94o3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike150%2C5%2C5%2C150%2C50/sign=61180a57a3014c080d3620f76b12696d/d6ca7bcb0a46f21f3635d9adfc246b600d33aecf.jpg" width="300"/>
            <div class="seal-result seal-result-fail">不通过</div>
        </div>

        <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>

    <script>
        //Canvas学习这一片就够了
      var link = "https://www.runoob.com/w3cnote/html5-canvas-intro.html";
    </script>



</html>

展示效果

20190614104453390.png


文章来源:

https://blog.csdn.net/qq_38261174/article/details/91955069

若有侵权等问题请联系我删除,感谢感谢