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

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

<!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. URLConnection类详解-转

    转-http://www.cnblogs.com/shijiaqi1066/p/3753224.html 1. URLConnection概述 URLConnection是一个抽象类,表示指向URL指 ...

  2. Flask实战-留言板-使用Flask-DebugToolbar调试程序、Flask配置的两种组织形式

    使用Flask-DebugToolbar调试程序 扩展Flask-DebugToolbar提供了一系列调试功能,可以用来查看请求的SQL语句.配置选项.资源加载情况等信息.这些信息在开发时会非常有用. ...

  3. SQL 连接（内连接，外连接）

    内连接 现在有两张表,学生表student1,成绩表SC1,两张表的数据如下 现在要对两张表做连接查询,连接一般需要写条件,where 或者 on 后面 , select * from student ...

  4. 组件 restful_API

    1 token 认证 2 权限 3 注册器和响应 4 频率组件

  5. mysql之统一刷表

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

  6. 解决Postman User-Agent 设置失效

    问题: 设置header中的UserAgent选项,抓包以后依然还是默认头信息 test Domain www.baidu.com Iphone6 UserAgent访问效果 User-Agent: ...

  7. centos设置网卡开机自启动

    1.进入目录/etc/sysconfig/network-scripts/2.修改ifcfg-enxxxxxxxx 文件   (即你的网卡标识命名的配置文件)3. 将ONBOOT=no改成yes4. ...

  8. MySql 8.0 C#连接报错 MySql.Data.MySqlClient.MySqlException (0x80004005): Authentication to host '12.118.224.181' for user 'root' using method 'caching_sha2_password' failed with message: Reading from t

    解决方法 在连接字符串后面加上   SslMode=None 

  9. 20171012--jq 遍历取值

    1.父节点:parent(); 2.子节点:children(); 3.兄弟节点:siblings(); 4.用find:$("div").find("span" ...

  10. bzoj1997 [HNOI2010]平面图判定Plana

    bzoj1997 [HNOI2010]平面图判定Planar 链接 bzoj luogu 思路 好像有很多种方法过去.我只说2-sat 环上的边,要不在里面,要不在外边. 有的边是不能同时在里面的,可 ...