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

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

<!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. Class打包成jar

    Class打包成jar 现在我的文件夹的目录在: C:\Users\linsenq\Desktop\cglibjar 我要把位于这个目录下的所有文件夹以及这个文件夹下的.class文件打成jar包 第 ...

  2. Cookie写不进去问题深入调查 https Secure Cookie

    Cookie写不进去问题深入调查 https Secure Cookie 什么情形下,Cookie 会写不进去?https Secure Cookie像是语法错误那种显而易见的就不用说了,除此之外你可 ...

  3. Connector for Python

    连接mysql, 需要mysql connector, conntector是一种驱动程序,python连接mysql的驱动程序,mysql官方给出的名称为connector/python, 可参考m ...

  4. CAN自收自发问题小结

    2011-12-02 21:59:23 流程图: CAN自收自发问题小结 1,地址如何确定?  答:51的片外扩展地址,R/W脚的电平会根据代码自动更改,不需要设置.    参考 单片机的外部存储器的 ...

  5. NOIP2015题解

    D1T1模拟 #include<bits/stdc++.h> #define re(i,l,r) for(int i=(l);i<=(r);i++) using namespace ...

  6. python-支付宝支付示例

      项目演示: 1.输入金额 2.扫码支付: 3.支付完成: 4.跳转回商户 一.注册账号 https://openhome.alipay.com/platform/appDaily.htm?tab= ...

  7. C/C++中数据的存储

    学java时了解到不同的数据在系统中存储的位置不一样,有的存在栈里,有的存在堆里.学C/C++时没注意过这个,最近学数据结构时遇到了问题:在定义一个结构体的指针时,系统如何给它分配的空间?从而让我想去 ...

  8. [Python数据挖掘]第4章、数据预处理

    数据预处理主要包括数据清洗.数据集成.数据变换和数据规约,处理过程如图所示. 一.数据清洗 1.缺失值处理:删除.插补.不处理 ## 拉格朗日插值代码(使用缺失值前后各5个未缺失的数据建模) impo ...

  9. （转）How Transformers Work --- The Neural Network used by Open AI and DeepMind

    How Transformers Work --- The Neural Network used by Open AI and DeepMind Original English Version l ...

  10. tcp config

    $ sudo sysctl net.ipv4.tcp_reordering=1 $ sudo sysctl net.ipv4.tcp_thin_linear_timeouts=1 $ sudo sys ...