JS框架_(Esign.js)仿信用卡電子簽名特效

本文轉載自查看原文 2018-07-29 20:59 1583 JQuery

百度雲盤　　傳送門　　密碼：l60w

電子簽名特效效果：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>jQuery+HTML5仿信用卡電子簽名特效</title>

<link rel="stylesheet" href="css/esignDemo.css">

</head>

<center>
<div class="canvasDiv">
    <div id="editing_area">
        <canvas width="600" height="250" id="canvasEdit"></canvas>
    </div>
</div>

<div class="imgDiv">
    <span id="sign_show"></span>
</div>

<div class="btnDiv">
    <a id="sign_ok" class="okBtn">確認</a>
    <a id="sign_clear" class="clearBtn">清除</a>
</div>
</center>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/esign.js"></script>
<script type="text/javascript">
$(function(){
    //初始化動作，根據DOM的ID不同進行自定義，如果不寫則內部默認取這四個
    $().esign("canvasEdit", "sign_show", "sign_clear", "sign_ok");
});
</script>


</body>
</html>

index.html

實現過程：

CSS

簽名版和樣式版

.canvasDiv{
    height: 250px;
    width: 600px;
    border: 1px solid black;
}

.imgDiv{
    height: 50px;
    width: 80px;
    border: 1px solid black;
    margin-top: 15px;
}

border ：簡寫屬性在一個聲明設置所有的邊框屬性

border-width　　傳送門
border-style　　　　傳送門
border-color　　傳送門

4個參數
border-style:dotted solid double dashed; 
上邊框是點狀
右邊框是實線
下邊框是雙線
左邊框是虛線


3個參數
border-style:dotted solid double;
上邊框是點狀
右邊框和左邊框是實線
下邊框是雙線


2個參數
border-style:dotted solid;
上邊框和下邊框是點狀
右邊框和左邊框是實線


1個參數
border-style:dotted;
所有 4 個邊框都是點狀

border-style 屬性

DOM

簽名版和樣式版和按鈕

<center>
<div class="canvasDiv">
    <div id="editing_area">
        <canvas width="600" height="250" id="canvasEdit"></canvas>
    </div>
</div>

<div class="imgDiv">
    <span id="sign_show"></span>
</div>

<div class="btnDiv">
    <a id="sign_ok" class="okBtn">確認</a>
    <a id="sign_clear" class="clearBtn">清除</a>
</div>
</center>

電子簽名(esign.js)與按鈕進行綁定

<script type="text/javascript">
$(function(){
    //初始化動作，根據DOM的ID不同進行自定義，如果不寫則內部默認取這四個
    $().esign("canvasEdit", "sign_show", "sign_clear", "sign_ok");
});
</script>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 生成仿信用卡的卡號 Vue 使用 canvas 實現手寫電子簽名（vue-esign）信用卡評分信用卡詐騙分析信用卡評分模型（五） BrainTree信用卡包 PS制作電子簽名生成 AutoCAD 電子簽名快速摳出電子簽名 vue做的電子簽名