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.stroke.........完整代码请登录后点击上方下载按钮下载查看

网友评论0