canvas手机签名

最新推荐文章于 2024-07-22 10:07:33 发布

qq_36587340

最新推荐文章于 2024-07-22 10:07:33 发布

阅读量180

点赞数

分类专栏： html+css webapp javascript

本文链接：https://blog.csdn.net/qq_36587340/article/details/83089280

版权

javascript 同时被 3 个专栏收录

33 篇文章 0 订阅

订阅专栏

html+css

13 篇文章 0 订阅

订阅专栏

webapp

2 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>canvas手机签名</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body {
        background: #e7e7e7;
      }
      canvas {
        display: block;
        margin: 50px auto;
        background: #fff;
      }
      button {
        display: block;
        width: 100px;
        height: 40px;
        margin: 20px auto 0;
        border: 0;
        border-radius: 5px;
        background: #2ca2dd;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <canvas width="300" height="200">您当前浏览器不支持canvas，建议更换浏览器！</canvas>
    <button>保存</button>
    <button>清空画布</button>
    <script>
      var canvas = document.querySelector('canvas'),
        oBtn = document.querySelectorAll('button'),
        ctx = canvas.getContext('2d');
      var _x = 0,
        _y = 0,
        x = 0,
        y = 0;
      // 设置画布大小
      canvas.width = 300;
      canvas.height = 200;
      // 开始绘制
      canvas.addEventListener('touchstart', function (e) {
        e.preventDefault();
        _x = e.touches[0].pageX,
        _y = e.touches[0].pageY;
        // 路径开始
        ctx.beginPath();
        ctx.moveTo(_x - canvas.offsetTop, _y - canvas.offsetLeft);

        // 路径移动
        this.addEventListener('touchmove', function (e) {
          x = e.touches[0].pageX,
          y = e.touches[0].pageY;
          ctx.lineTo(x - canvas.offsetTop, y - canvas.offsetLeft);
          ctx.stroke();
        });
      });
      // 导出图片
      oBtn[0].onclick = function () {
        var oImg = new Image();
        ctx.drawImage(oImg, 0, 0);
        console.log(canvas.toDataURL('image/png').length)
        oImg.src = canvas.toDataURL('image/png');
        document.body.appendChild(oImg);
      }
      // 清空画布
      oBtn[1].onclick = function () {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
      }
    </script>
  </body></html>