canvas画板签名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>电子签名原理解析</title>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.canvasClas{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
</style>
</head>
<body>
<div class="canvasClas">
<div class="canvasdom">
<button class="cancel">取消</button>
<button class="save">保存</button>
</div>
</div>
</body>
<script src="https://www.jq22.com/demo/canvashbqm202302162105/js/autograph.js" type="text/javascript" charset="utf-8"></script>
<script>
/*
画板签名用法：
1、new Autog()实例化插件
2、传入以下参数进行绘制画板
（1）、class：实例化的class
（2）、id:canvas的ID
（3）、width：canvas width
（4）、height：canvas height
（5）、lineWidth：线条宽
（6）、strokeStyle：线条颜色
3、可以在传入的class名的div中添加class名为以下就可以进行清除和保存
（1）、cancel：清除
（2）、save：保存
例：
传入的class名为"canvasdom"，
<div class="canvasdom">
<button class="cancel">取消</button>
<button class="save">保存</button>
</div>
*/
// 实例化画板签名
var autog = new Autog({
class:"canvasdom",//实例化的class
id:"canvasId",//canvas的ID
width:600,//canvas width
height:300,//canvas height
lineWidth:4,//线条宽
strokeStyle:"#000",//线条颜色
})
</script>
</html>
页:
[1]