需求：业务员做提交时要签名。。。
代码不多简单易懂，直接看代码
<!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>
效果：
结语： 以上就是今天要分享的内容了，效果简单勿喷