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

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

<!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. Java -- 构造函数 & this & 方法重写和方法重载的区别

    JAVA: 今天总结一下构造方法.关键字.方法重载和方法重写的异同   一.构造方法(构造函数)1.构造方法的作用:一是创建对象时调用构造方法创建对象,二是可以初始化多个属性 [学生类创建一个学生对象 ...

  2. IP通信基础学习第六周（上）

    CSAM:冲突检测 链路:是指一条无源的点到点的物理线路段,且中间没有任何其它的交换结点. 数据链路:把实现相关规程的硬件和软件加到链路上. 数据链路层的功能:链路管理,信息的传输,流量与差错控制,异 ...

  3. 利用multiprocessing.managers开发跨进程生产者消费者模型

    研究了下multiprocessing.managers,略有收获,随笔一篇: 核心思路是构造一个manager进程,这个进程可以通过unix socket或tcp socket与其它进程通信:因为利 ...

  4. JZ2440学习笔记之内存设备

    通过OM[1:0]选择启动的设备: OM[1:0]=00,地址0对应的是Internal 4K RAM,且Nand的前4K会被复制到这里,得到执行: OM[1:0]=01,地址0对应的是Nor Fla ...

  5. web性能测试

    在公司Confluence上看到一篇好文,原链接已不能访问.先收藏 转帖自:http://blog.csdn.net/wxq8102/article/details/1735726 1.1基本概念并发 ...

  6. Spring 学习——Spring AOP——AOP配置篇Advice（无参数传递）

    声明通知Advice 配置方式(以前置通知为例子) 方式一 <aop:config> <aop:aspect id="ikAspectAop" ref=" ...

  7. No Directionality widget found.错误记录。

    import 'package:flutter/material.dart'; void main() => runApp(new Center(child: new Text('Hello, ...

  8. 从0开始的Hexo主题制作

    从0开始的Hexo主题制作 从零开始制作 Hexo 主题 H2O主题 先坑着

  9. 配置TortoiseGit与Github

    https://jingyan.baidu.com/article/495ba841f2892638b30edefa.html https://www.cnblogs.com/maojunyi/p/7 ...

  10. .NET in Browser - Blazor

    什么是Blazor Blazor 是一个实验性的. NET web 框架, 使用 C# 和 HTML 在任何浏览器中不需要插件即可运行 WebAssembly 程序集. 什么是WebAssembly ...