js+css实现电子签章及授权书效果代码-html代码-BFW代码库

js+css实现电子签章及授权书效果代码

代码语言：html

代码描述：js+css实现电子签章及授权书效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>电子授权证书</title>
<style>

    .img-bgc {
    max-height: 500px;
    max-width: 360px;
    margin: auto;
    background: url(//repo.bfw.wiki/bfwrepo/icon/60ff40ff48aca.jpg) no-repeat 0 0;
    background-size: 100%;
    color: #fff;

}

.border {
    margin-left: 50px;
    /* border:1px solid red; */
}

p {
    padding-top: 185px;
    font-size: 12px;
    line-height: 30px;
}

#canvas {
    margin-top: -119px;
    margin-left: 192px;
    
}
</style>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>

</head>

<body>
    <div class="container img-bgc">
        <div class="border">
            <p>兹授权&nbsp;&nbsp;<ins>注册新用户张三丰</ins><br>
                为bfw代码网签约VIP<br><br>
                授权产品：bfw代码网全网素材<br>
                授权区域：17素材网<br>
                授权编号：20210727<br>
                授权时间：2021年1月1日至2021年12月31日<br>
            </p>

            <!-- 合作计时 -->
            <div id="times_wrap" class="time_num">
                已合作：
                <div class="time_w">
                    <span id="time_d" class="time"> </span>天
                    <span id="time_h" class="time"> </span>时
                    <span id="time_m" class="time"> </span>分
                    <span id="time_s" class="time"> </span>秒
                </div>
            </div>

        </div>


        <!-- 绘制电子印章 -->
        <canvas id="canvas" width="150" height="150"></canvas>
    </div>

    <script>
        function createSeal(id, company, name) {

            var canvas = document.getElementById(id);
            var context = canvas.getContext('2d');

            // 绘制印章边框   
            var width = canvas.width / 2;
            var height = canvas.height / 2;
            context.lineWidth = 3;
            context.strokeStyle = "rgba(155,34,45,1)";
            context.beginPath();
            context.arc(width, height, 60, 0, Math.PI * 2);
            context.stroke();

            //画五角星
            create5star(context, width, height, 20, "rgba(155,34,45,1)", 0);

            // 绘制印章名称   
            context.font = '13px Helvetica';
            context.textBaseline = 'middle'; //设置文本的垂直对齐方式
            context.textAlign = 'center'; //设置文本的水平对对齐方式
            context.lineWidth = 1;
            context.fillStyle = 'rgba(155,34,45,1)';
            context.fillText(name, width, height + 40);

            // 绘制印章单位   
            context.translate(width, height); // 平移到此位置,
            context.font = '15px Helvetica'
            var count = company.length; // 字数   
            var angle = 4 * Math.PI / (3 * (count - 1)); // 字间角度   
            var chars = company.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);
             .........完整代码请登录后点击上方下载按钮下载查看