canvas实现简单签名功能

canvas实现简单签名功能

技术杂谈小彩虹2021-07-08 10:45:3250A+A-

关注公众号: 微信搜索 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>

三、效果

四、结尾

文章来源: 自己博客文章 https://www.cnblogs.com/ljx20180807/p/10323697.html

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1

联系我们