H5中使用CANVAS实现手写签名test

最新推荐文章于 2024-05-22 16:14:07 发布

羽筠

最新推荐文章于 2024-05-22 16:14:07 发布

阅读量367

点赞数

分类专栏： canvas 文章标签： html5 javascript

本文链接：https://blog.csdn.net/qq_16494241/article/details/130503175

版权

canvas 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

H5中使用CANVAS实现手写签名功能测试demo

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=750, user-scalable=no">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" /> -->
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-title" content="">
<title>mobile touch test</title>
<style>
  *{ margin:0; padding:0;}
  body{ font-size: 28px; background-color:#eee;}
  canvas{ vertical-align:middle; width:100%; background-color:#fff;}
</style>
</head>

<body>
  
  <div style="padding: 0 10px;">
    <p>-----</p><p>-----</p><p>-----</p><p>-----</p><p>-----</p><p>-----</p><p>-----</p><p>-----</p><p>-----</p><p>-----</p><p>-----</p><p>-----</p><p>-----</p>
    <p>-----</p><p>-----</p><p>-----</p><p>-----</p><p>-----</p><p>-----</p><p>-----</p><p>-----</p><p>-----</p><p>-----</p><p>-----</p><p>-----</p><p>-----</p>
  </div>
  <div id="resImg" style="padding: 0 10px;">
  </div>
  <div style="padding: 10px; display: flex; justify-content: center; align-items: center;">
    <p>手写签名区域</p>
  </div>
  <div style="padding: 0 10px; display: flex; justify-content: center; align-items: center;">
    <canvas id="drawLine"></canvas>
  </div>
  <div style="padding: 10px 10px 30px 10px; display: flex; justify-content: center; align-items: center;">
    <button id="reSetBtn" type="button" style="width: 5em; height: 2em; margin: 5px; font-size: 28px;">重置</button>
    <button id="confirmBtn" type="button" style="width: 5em; height: 2em; margin: 5px; font-size: 28px;">确定</button>
  </div>

  <script type="text/javascript">
    
    function canvasDrawLineInit(){
      console.log(1111 , document.documentElement.clientWidth , document.documentElement.clientWidth / 2);
      
      var mycanvas = document.getElementById("drawLine");
      console.log(2222 , mycanvas.width , mycanvas.height);
      mycanvas.width = mycanvas.clientWidth;
      mycanvas.height = mycanvas.clientWidth / 2;
      console.log(3333 , mycanvas.width , mycanvas.height);
      
      ctx = mycanvas.getContext("2d");
      // ctx.fillStyle = "#f00";
      ctx.strokeStyle = "#f00";
      ctx.lineWidth = 5;
      // ctx.lineJoin="round";
      
      // 重置
      document.getElementById('reSetBtn').addEventListener("click",reSet,false);
      function reSet(){
        ctx.clearRect(0,0,mycanvas.width,mycanvas.height);
      }
      // 确定
      var isHaveImg = false;
      document.getElementById('confirmBtn').addEventListener("click",confirm,false);
      function confirm(){
        if(isHaveImg){
          // document.getElementById('resImg').removeChild(document.getElementById('resImg').getElementsByTagName('img')[0]);
          document.getElementById('resImg').getElementsByTagName('img')[0].remove();
        }else{
          isHaveImg = true;
        }
        var img = document.createElement('img');
        img.setAttribute('src',mycanvas.toDataURL('image/png'));
        document.getElementById('resImg').appendChild(img);
        setTimeout(()=>{
          _left = mycanvas.offsetLeft;
          _top = mycanvas.offsetTop;
        },500)
      }
      
      // 
      mycanvas.addEventListener("touchstart",touchStartEvent,false);
      mycanvas.addEventListener("touchend",touchEndEvent,false);
      mycanvas.addEventListener("touchmove",touchMoveEvent,false);
      
      var _left = mycanvas.offsetLeft;
      var _top = mycanvas.offsetTop;
      console.log(4444 , _left , _top);
      
      var mouseX = null;
      var mouseY = null;
      function touchStartEvent(e){
        mouseX = event.touches[0].pageX - _left;
        mouseY = event.touches[0].pageY - _top;
        
        ctx.beginPath();
        ctx.moveTo(mouseX,mouseY);
        
        return false;
      }
      function touchEndEvent(e){
        mouseX = null;
        mouseY = null;
        return false;
      }
      function touchMoveEvent(e){
        e.preventDefault();
        mouseX = event.touches[0].pageX - _left;
        mouseY = event.touches[0].pageY - _top;
        
        ctx.lineTo(mouseX,mouseY);
        ctx.stroke();
      }
    }
    canvasDrawLineInit();

  </script>
  
</body>
</html>