pc端结合canvas实现简单签名功能
关注公众号： 微信搜索 web全栈进阶 ; 收货更多的干货
一、需求
业务员做申请提交时要签名。。。
二、代码
代码不多简单易懂，直接看代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
background: #ccc;
}
#oc{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin:200px auto;
background: white;
}
.span{
display: inline-block;
width: 100px;
height: 50px;
background: #fff;
line-height: 50px;
text-align: center;
margin: 193px 0 0 200px;
cursor: pointer;
}
</style>
</head>
<body>
<canvas id="oc" width="500" height="500"></canvas>
<span class="span" onclick="reset()">重置</span>
</body>
<script type="text/javascript">
// 获取canvas节点
let testNode = document.getElementById('oc');
window.onload = function(){
// 判断是否支持
if(testNode.getContext){
var ctx = testNode.getContext("2d")
testNode.onmousedown = function(ev){
var ev = ev || event;
ctx.beginPath();
ctx.moveTo(ev.clientX - this.offsetLeft,ev.clientY - this.offsetTop);
if(testNode.setCapture){
testNode.setCapture(); // 对鼠标进行捕获
}
document.onmousemove = function(ev){
var ev = ev || event;
ctx.lineTo(ev.clientX - testNode.offsetLeft,ev.clientY - testNode.offsetTop); // 绘制线条
ctx.stroke() // 绘制路劲
// console.log(ev.clientX - testNode.offsetLeft,ev.clientY - testNode.offsetTop)
}
document.onmouseup = function(){
document.onmousemove = document.onmouseup=null;
if(document.releaseCapture){
document.releaseCapture(); // 释放对鼠标的捕获
}
}
// 禁止事件的默认行为 处理拖拽在主流浏览器内的兼容问题
return false;
}
}
}
// 重置
function reset() {
testNode.getContext("2d").clearRect(0, 0, testNode.width, testNode.height); // 清空画布
}
</script>
</html>
