需求：业务员做提交时要签名。。。
代码不多简单易懂，直接看代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
background: #ccc;
}
#oc{
position: absolute;
left: ;
right: ;
top: ;
bottom: ;
margin:200px auto;
background: white;
}
.span{
display: inline-block;
width: 100px;
height: 50px;
background: #fff;
line-height: 50px;
text-align: center;
margin: 193px 200px;
cursor: pointer;
}
</style>
</head>
<body>
<canvas id="oc" width="" height=""></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(, , testNode.width, testNode.height); // 清空画布
}
</script>
</html>
效果：
结语： 以上就是今天要分享的内容了，效果简单勿喷