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

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

<!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数据库优化之索引的维护和优化

    这里是一个工具,即pt-duplicate-key-checker工具 用来检查重复及冗余的索引 用法如下:pt-duplicate-key-checker  -uroot  -p密码  -h127. ...

  2. C++笔记整理（参考整理自各大博客）

    为什么构造函数不能是虚函数,析构函数往往是虚函数? 静态存储区.无论在那里构建,其过程都是两步:首先,分配一块内存:其次,调用构造函数.好,问题来了,如果构造函数是虚函数,那么就需要通过vtable  ...

  3. 《CSS世界》读书笔记（十一）

    激进的margin属性 margin与元素尺寸以及相关布局 元素尺寸 border box尺寸,对应jQuery中的$().outerWidth()和$().outerHeight()方法,在原生DO ...

  4. Android Studio环境安装

    Android Studio下载 http://www.android-studio.org/ JDK下载 https://www.oracle.com/technetwork/java/index. ...

  5. java0424 wen 集合框架2

  6. Oracle 12 Rman增量备份

    增量备份 增量备份主要作用是仅复制自上次备份以来已更改的数据块.您可以使用RMAN创建数据文件,表空间或整个数据库的增量备份. 将增量备份作为策略的一部分的主要原因是: 用于基于增量更新备份的策略,其 ...

  7. 猴子吃桃问题(Java递归实现）

    猴子吃桃问题:猴子第一天摘下若干个桃子,当即吃了一半,还不过瘾,又多吃了一个,第二天早上又将剩下的桃子吃掉一半,又多吃了一个.以后每天早上都吃了前一天剩下的一半零一个.到第10天早上想再吃时,见只剩下 ...

  8. WARN PageNotFound:208 - Request method 'POST' not supported

    在地址栏输入网址访问页面 ,用的是GET方法. 在用ajax接收后台数据,根据返回值进行提示或页面跳转时报:WARN PageNotFound:208 - Request method 'POST' ...

  9. BZOJ-3208|记忆化搜索-花神的秒题计划Ⅰ

    背景[backboard]: Memphis等一群蒟蒻出题中,花神凑过来秒题-- 描述[discribe]: 花花山峰峦起伏,峰顶常年被雪,Memphis打算帮花花山风景区的人员开发一个滑雪项目. 我 ...

  10. Lintcode85-Insert Node in a Binary Search Tree-Easy

    85. Insert Node in a Binary Search Tree Given a binary search tree and a new tree node, insert the n ...