需求：业务员做提交时要签名。。。

代码不多简单易懂，直接看代码

<!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>

效果：

结语： 以上就是今天要分享的内容了，效果简单勿喷

pc端结合canvas实现简单签名功能的更多相关文章

  1. 我的Android进阶之旅------>Android实现用Android手机控制PC端的关机和重启的功能（三）Android客户端功能实现

    我的Android进阶之旅------>Android实现用Android手机控制PC端的关机和重启的功能(一)PC服务器端(地址:http://blog.csdn.net/ouyang_pen ...

  2. 我的Android进阶之旅------&gt;Android实现用Android手机控制PC端的关机和重新启动的功能（二）Androidclient功能展示

    Androidclient的实现思路大致例如以下: 1.首先扫描局域网内全部PC,看是否有PC端的server在执行并监听30000port. watermark/2/text/aHR0cDovL2J ...

  3. 移动端利用canvas画布简单实现刮刮乐效果

    为了研究canvas一些属性简单实现的一个小效果  代码样式不太规范 随手写的 请问喷 初学者可以看下 css代码 <style> * { margin: 0; padding: 0; } ...

  4. 我要多开梦幻手游PC端（梦幻手游PC端多开的简单分析及实现办法）（二）

    上一篇,多开方法,适用于一年前的版本 http://www.cnblogs.com/suanguade/p/5646776.html 前言: 一转眼一年过去了,日子越来越无聊了,于是,准备再玩一玩梦幻 ...

  5. 酷狗音乐PC端怎么使用听歌识曲功能?

    生活中很多时候会听到一些美妙的音乐,耳熟或者动听却不知道它的名字.就像第一眼看到你心动的那个她却不知她叫什么.移动端有酷狗音乐的听歌识曲.现在PC端也有了相同的功能,每当我们看到一部精彩影视剧听到美妙 ...

  6. 直播的本质（创业者应该要从商业模式的右边开始思考，你为用户创造了什么价值？找客户并不难，但要想办法让客户不离不弃；PC端功能的丰富很重要，因为手机版通常只是一个迷你版）

    我想稍微给直播这件事浇点冷水. 的确,直播现在越来越火,YouTube凭着良好的基础建设平台前段时间也做起了直播,Facebook Live最近也加入了变脸.预定直播时间和双人录制的功能,更不用说国内 ...

  7. Canvas动画(PC端 移动端)

    Canvas动画(PC端 移动端) 一,介绍与需求 1.1,介绍 canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3 ...

  8. jquery简单的图片切换效果，支持pc端、移动端的banner图片切换开发

    详细内容请点击 无意中看见了两年前写的一个图片切换,那会儿刚刚学习网页制作,可以说是我的第一个处女座的jquery图片切换效果.无聊之余对它的宽度稍稍做了一下修改,变成了支持pc端.手机端全屏的ban ...

  9. 简单的利用JS来判断页面是在手机端还是在PC端打开的方法

    在移动设备应用越来越广泛的今天,许多网站都开始做移动端的界面展示,两者屏幕尺寸差异很大,所以展示的内容也有所差别.于是就遇到一个问题,如何判断你的页面是在移动端还是在PC端打开的,很简单的问题,那我们 ...

随机推荐

  1. Mysql复制一个数据库到另一个数据库

    mysqldump -u root -p source_db > /home/db_bak.sql #导出数据库 123456 #输入数据库密码 扩展: mysqldump -u root -p ...

  2. Maven不能下载SNAPSHOT包但是能下载RELEASE包的解决办法

    在使用过程中,Maven默认配置是不能下载SNAPSHOT包的,这是基于一种代码稳定性进行考量得出的结论.引入SNAPSHOT包最大的问题就是,由于SNAPSHOT允许重复上传,所以引用一个这样的包开 ...

  3. 让网站永久拥有HTTPS - 申请免费SSL证书并自动续期 Let’s Encrypt

    让网站永久拥有HTTPS - 申请免费SSL证书并自动续期 Let’s Encrypt 为什么要用HTTPS  网站没有使用HTTPS的时候,浏览器一般会报不安全,而且在别人访问这个网站的时候,很有可 ...

  4. mysql之统一刷表

    统一刷表: update report set pdfPath= CONCAT(pdfPath ,substring_index(fileLink, '\\', -1)); update report ...

  5. java消息服务学习之JMS概念

    JMS即Java消息服务(Java Message Service)应用程序接口是一个Java平台中关于面向消息中间件(MOM)的API,用于在两个应用程序之间,或分布式系统中发送消息,进行异步通信. ...

  6. [dart学习]第二篇：dart变量介绍 （一）

    前言 本文的所有内容均是官方文档的简单翻译和理解,需要查看原文,请登录  https://www.dartlang.org/guides/language/language-tour  阅读, 让我们 ...

  7. matlab飞机飞行

    function donghua4 %首先建立一个飞机模型 %然后写一个旋转仿射矩阵 %利用仿射变换改变飞机方向 clear;clc;TR=[1 50 41;1 51 50;2 51 1;3 51 2 ...

  8. 新疆大学ACM-ICPC程序设计竞赛五月月赛（同步赛）A Red Rover

    题目链接 大概意思就是,找出一个字串,将其所有出现的地方替换成一个字母M后的长度len1,然后再加上这个字串的长度t_len得到一个新的长度len,求这个len最小等于多少. 当然,也可以不找这个串, ...

  9. hashlib hmac configparser subprocess xlrd xlwt

    hashlib模块:加密 import hashlib # 基本使用 cipher = hashlib.md5('需要加密的数据的二进制形式'.encode('utf-8')) print(ciphe ...

  10. md5 collision（md5碰撞）之记录一些MD5值

    md5 collision之记录一些MD5值   “Magic Hash”的PHP漏洞可以使得攻击者非法获取用户的账号信息.   漏洞原因: PHP以一种特定的方式处理被哈希的字符串,攻击者可以利用其 ...