search
HomeWeb Front-endH5 TutorialHTML5 中canvas支持触摸屏的签名面板
HTML5 中canvas支持触摸屏的签名面板
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
May 17, 2016 am 09:07 AM
html

　　1.前言

　　最近实在是太忙了，从国庆之后辞职，在慢慢的找工作，到现在的这家公司上班大半个月了，太多的心酸泪无以言表，面试过程中，见到的坑货公司是一家又一家，好几家公司自己都只是上一天班就走了，其中有第一天上班就加班到10点的，有一家公司在体育西路那边，太远，第一天回家挤公交也是太累，以前上班都是走路上班的，自己确实不适合挤公交，还有公司面试的时候和你说什么大数据，性能优化什么的，进公司一看，他们就是用的最简单的三层，没有什么设计模式，总之太多心酸，幸运的是现在这家公司还不错，找工作就是要宁缺毋滥。

 

　　2.canvcas标签

　　canvas基础教程： 标签定义图形，比如图表和其他图像。HTML5 的canvas元素使用JavaScript在网页上绘制图像。甚至可以在canvas上创建并操作动画，这不是使用画笔和油彩所能够实现的。跨所有web浏览器的完整HTML5支持还没有完成，但在新兴的支持中，canvas已经可以在几乎所有现代浏览器上良好运行。canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。来公司一个月了主要以学习为主，我是做后台开发，以前也没有用过Oracle数据库，这一个月主要是学习H5的一些新特性，还有就是css3.0，在就是Oracle在服务器上面的安装部署，一些数据导入导出，数据备份啥的，前端的东西都比较差，现在也是一个学习的机会，就当好好学习了。

 

　　3.手写签名面板

　　公司做的是自动化办公OA系统，一些审核的地方需要加入一些手写签名的功能，刚开始做这个也是没有思路，在网上也找了一下资料，后来发现H5有这个canvcas新标签，感到格外是欣喜。于是拿过来试一下，还真可以。

　　

HTML5 中canvas支持触摸屏的签名面板

 

HTML5 中canvas支持触摸屏的签名面板

　　4.页面代码

@{
  Layout = null;
}
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width" />
  <title>Testpage</title>
  <script src="~/Assets/jquery-2.1.1.js"></script>
  <script src="~/Assets/bootstrap/bootstrap.js"></script>
  <link href="~/Assets/bootstrap/bootstrap.css" rel="stylesheet" />
  <script src="~/Scripts/WritingPad.js"></script>
  <script src="~/Assets/jq-signature.js"></script>
</head>
<body style="background-color:#b6ff00">
  <button class="btn btn-primary" type="button" style="position:relative">点击我</button>
</body>
</html>
<script>
  $(function () {
    $(".btn,.btn-primary").click(function () {
      var wp = new WritingPad();
      //wp.init();
    });
  });
</script>


　　5.脚本代码一

/**
 * 功能：签名canvas面板初始化,为WritingPad.js手写面板js服务。
 * 作者：黄金锋 (549387177@qq.com)
 * 日期：2015-11-15  15:51:01
 * 版本：version 1.0
 */

(function (window, document, $) {
    'use strict';

  // Get a regular interval for drawing to the screen
  window.requestAnimFrame = (function (callback) {
    return window.requestAnimationFrame || 
      window.webkitRequestAnimationFrame ||
      window.mozRequestAnimationFrame ||
      window.oRequestAnimationFrame ||
      window.msRequestAnimaitonFrame ||
      function (callback) {
        window.setTimeout(callback, 1000/60);
      };
  })();

  /*
  * Plugin Constructor
  */

  var pluginName = 'jqSignature',
      defaults = {
        lineColor: '#222222',
        lineWidth: 1,
        border: '1px dashed #CCFF99',
        background: '#FFFFFF',
        width: 500,
        height: 200,
        autoFit: false
      },
      canvasFixture = '<canvas></canvas>';

  function Signature(element, options) {
    // DOM elements/objects
    this.element = element;
    this.$element = $(this.element);
    this.canvas = false;
    this.$canvas = false;
    this.ctx = false;
    // Drawing state
    this.drawing = false;
    this.currentPos = {
      x: 0,
      y: 0
    };
    this.lastPos = this.currentPos;
    // Determine plugin settings
    this._data = this.$element.data();
    this.settings = $.extend({}, defaults, options, this._data);
    // Initialize the plugin
    this.init();
  }

  Signature.prototype = {
    // Initialize the signature canvas
    init: function() {
      // Set up the canvas
      this.$canvas = $(canvasFixture).appendTo(this.$element);
      this.$canvas.attr({
        width: this.settings.width,
        height: this.settings.height
      });
      this.$canvas.css({
        boxSizing: 'border-box',
        width: this.settings.width + 'px',
        height: this.settings.height + 'px',
        border: this.settings.border,
        background: this.settings.background,
        cursor: 'crosshair'
      });
      // Fit canvas to width of parent
      if (this.settings.autoFit === true) {
        this._resizeCanvas();
      }
      this.canvas = this.$canvas[0];
      this._resetCanvas();
      // Set up mouse events
      this.$canvas.on('mousedown touchstart', $.proxy(function(e) {
        this.drawing = true;
        this.lastPos = this.currentPos = this._getPosition(e);
      }, this));
      this.$canvas.on('mousemove touchmove', $.proxy(function(e) {
        this.currentPos = this._getPosition(e);
      }, this));
      this.$canvas.on('mouseup touchend', $.proxy(function(e) {
        this.drawing = false;
        // Trigger a change event
        var changedEvent = $.Event('jq.signature.changed');
        this.$element.trigger(changedEvent);
      }, this));
      // Prevent document scrolling when touching canvas
      $(document).on('touchstart touchmove touchend', $.proxy(function(e) {
        if (e.target === this.canvas) {
          e.preventDefault();
        }
      }, this));
      // Start drawing
      var that = this;
      (function drawLoop() {
        window.requestAnimFrame(drawLoop);
        that._renderCanvas();
      })();
    },
    // Clear the canvas
    clearCanvas: function() {
      this.canvas.width = this.canvas.width;
      this._resetCanvas();
    },
    // Get the content of the canvas as a base64 data URL
    getDataURL: function() {
      return this.canvas.toDataURL();
    },

    reLoadData: function () {
        this.$canvas.remove();
        this._data = this.$element.data();

        //for (var i in this.settings) {
        //    alert(i+":"+this.settings[i]);
        //}

        //this.settings = $.extend({}, defaults, this._data);
        this.init();
    },
    // Get the position of the mouse/touch
    _getPosition: function(event) {
      var xPos, yPos, rect;
      rect = this.canvas.getBoundingClientRect();
      event = event.originalEvent;
      // Touch event
      if (event.type.indexOf('touch') !== -1) { // event.constructor === TouchEvent
        xPos = event.touches[0].clientX - rect.left;
        yPos = event.touches[0].clientY - rect.top;
      }
      // Mouse event
      else {
        xPos = event.clientX - rect.left;
        yPos = event.clientY - rect.top;
      }
      return {
        x: xPos,
        y: yPos
      };
    },
    // Render the signature to the canvas
    _renderCanvas: function() {
      if (this.drawing) {
        this.ctx.moveTo(this.lastPos.x, this.lastPos.y);
        this.ctx.lineTo(this.currentPos.x, this.currentPos.y);
        this.ctx.stroke();
        this.lastPos = this.currentPos;
      }
    },
    // Reset the canvas context
    _resetCanvas: function() {
      this.ctx = this.canvas.getContext("2d");
      this.ctx.strokeStyle = this.settings.lineColor;
      this.ctx.lineWidth = this.settings.lineWidth;
    },
    // Resize the canvas element
    _resizeCanvas: function() {
      var width = this.$element.outerWidth();
      this.$canvas.attr('width', width);
      this.$canvas.css('width', width + 'px');
    }
  };

  /*
  * Plugin wrapper and initialization
  */

  $.fn[pluginName] = function ( options ) {
    var args = arguments;
    if (options === undefined || typeof options === 'object') {
      return this.each(function () {
        if (!$.data(this, 'plugin_' + pluginName)) {
          $.data(this, 'plugin_' + pluginName, new Signature( this, options ));
        }
      });
    } 
    else if (typeof options === 'string' && options[0] !== '_' && options !== 'init') {
      var returns;
      this.each(function () {
        var instance = $.data(this, 'plugin_' + pluginName);
        if (instance instanceof Signature && typeof instance[options] === 'function') {
            var myArr=Array.prototype.slice.call( args, 1 );
            returns = instance[options].apply(instance, myArr);
        }
        if (options === 'destroy') {
          $.data(this, 'plugin_' + pluginName, null);
        }
        //if (options === 'reLoadData') {
        //    //this.$canvas.remove();
        //    $.data(this, 'plugin_' + pluginName, null);
        //    this._data = this.$element.data();
        //    this.settings = $.extend({}, defaults, options, this._data);
        //    this.init();
        //}
      });
      return returns !== undefined ? returns : this;
    }
  };

})(window, document, jQuery);


　　6.脚本代码二

/**
 * 功能：使用该jQuery插件来制作在线签名或涂鸦板，用户绘制的东西可以用图片的形式保存下来。
 * 作者：黄金锋 (549387177@qq.com)
 * 日期：2015-11-16  13:51:01
 * 版本：version 1.0
 */
var WritingPad = function () {
  var current = null;
  $(function () {
    initHtml();
    initTable();
    initSignature();
    if ($(".modal")) {
      $(".modal").modal("toggle");
    } else {
      alert("没用手写面板");
    }
    $(document).on("click", "#myClose,.close", null, function () {
      $('#mymodal').modal('hide');
      $("#mymodal").remove();
    });
    $(document).on("click", "#mySave", null, function () {
      var myImg = $('#myImg').empty();
      var dataUrl = $('.js-signature').jqSignature('getDataURL');
      var img = $('<img  alt="HTML5 中canvas支持触摸屏的签名面板" >').attr('src', dataUrl);
      $(myImg).append($('<p>').text("图片保存在这里"));
      $(myImg).append(img);
    });
    $(document).on("click", "#myEmpty", null, function () {
      $('.js-signature').jqSignature('clearCanvas');
    });
    $(document).on("click", "#myBackColor", null, function () {
      $('#colorpanel').css('left', '95px').css('top', '45px').css("display", "block").fadeIn();
      //$("canvas").css("background", "#EEEEEE");
      $("#btnSave").data("sender", "#myBackColor");
    });
    $(document).on("click", "#myColor", null, function () {
      $('#colorpanel').css('left', '205px').css('top', '45px').css("display", "block").fadeIn();
      $("#btnSave").data("sender", "#myColor");
    });
    $(document).on("mouseover", "#myTable", null, function () {
      if ((event.srcElement.tagName == "TD") && (current != event.srcElement)) {
        if (current != null) { current.style.backgroundColor = current._background }
        event.srcElement._background = event.srcElement.style.backgroundColor;
        //$("input[name=DisColor]").css("background-color", event.srcElement.style.backgroundColor);
        //var color = event.srcElement.style.backgroundColor;
        //var strArr = color.substring(4, color.length - 1).split(',');
        //var num = showRGB(strArr);
        //$("input[name=HexColor]").val(num);
        current = event.srcElement;
      }
    });
    $(document).on("mouseout", "#myTable", null, function () {
      if (current != null) current.style.backgroundColor = current._background
    });
    $(document).on("click", "#myTable", null, function () {
      if (event.srcElement.tagName == "TD") {
        var color = event.srcElement._background;
        if (color) {
          $("input[name=DisColor]").css("background-color", color);
          var strArr = color.substring(4, color.length - 1).split(',');
          var num = showRGB(strArr);
          $("input[name=HexColor]").val(num);
        }
      }
    });
    $(document).on("click", "#btnSave", null, function () {
      $('#colorpanel').css("display", "none");
      var typeData = $("#btnSave").data("sender");
      var HexColor = $("input[name=HexColor]").val();
      var data = $(".js-signature").data();
      if (typeData == "#myColor") {
        data["plugin_jqSignature"]["settings"]["lineColor"] = HexColor;
        $('.js-signature').jqSignature('reLoadData');
      }
      if (typeData == "#myBackColor") {
        data["plugin_jqSignature"]["settings"]["background"] = HexColor;
        $('.js-signature').jqSignature('reLoadData');
      }
    });
    $("#mymodal").on('hide.bs.modal', function () {
      $("#colorpanel").remove();
      $("#mymodal").remove();
      $("#myTable").remove();
    });
  });
  function initHtml() {
    var html = '<div class="modal" id="mymodal">' +
      '<div class="modal-dialog">' +
        '<div class="modal-content">' +
          '<div class="modal-header">' +
            '<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>' +
            '<h4 id="手写面板">手写面板</h4>' +
          '</div>' +
          '<div class="modal-body">' +
            '<div class="js-signature" id="mySignature">' +
             '</div>' +
             '<div>' +
             '<button type="button" class="btn btn-default" id="myEmpty">清空面板</button>' +
             '<button type="button" class="btn btn-default" id="myBackColor">设置背景颜色</button>' +
             //'<div style="position:absolute;relative">' +
             '<button type="button" class="btn btn-default" id="myColor">设置字体颜色</button>' +
             '<div id="colorpanel" style="position:absolute;z-index:99;display:none"></div>' +
             //'</div>'+
             '</div>' +
          '</div>' +
          '<div class="modal-footer">' +
            '<button type="button" class="btn btn-default" id="myClose">关闭</button>' +
            '<button type="button" class="btn btn-primary" id="mySave">保存</button>' +
            '<div id="myImg">' +
            '<div>' +
          '</div>' +
        '</div>' +
      '</div>' +
    '</div>';
    $('body').append(html);
  }
  function initTable() {
    var colorTable = "";
    var ColorHex = new Array('00', '33', '66', '99', 'CC', 'FF');
    var SpColorHex = new Array('FF0000', '00FF00', '0000FF', 'FFFF00', '00FFFF', 'FF00FF');
    for (var i = 0; i < 2; i++)
    {
      for (var j = 0; j < 6; j++)
      {
        colorTable = colorTable + '<tr height=12>';
        colorTable = colorTable + '<td width=11 style="background-color:#000000"></td>';
        if (i == 0)
        {
          colorTable = colorTable + '<td width=11 style="background-color:#' + ColorHex[j] + ColorHex[j] + ColorHex[j] + '"></td>';
        }
        else
        {
          colorTable = colorTable + '<td width=11 style="background-color:#' + SpColorHex[j] + '"></td>';
        }
        //colorTable = colorTable + '<td width=11 style="background-color:#000000"></td>';
        for (var k = 0; k < 3; k++)
        {
          for (l = 0; l < 6; l++)
          {
            colorTable = colorTable + '<td width=11 style="background-color:#' + ColorHex[k + i * 3] + ColorHex[l] + ColorHex[j] + '"></td>';
          }
        }
        colorTable = colorTable + '</tr>';
      }
    }
    colorTable =
    '<table border="1" id="myTable" cellspacing="0" cellpadding="0" style="border-collapse: collapse;cursor:pointer;" bordercolor="000000">'
    + colorTable + '</table>' +
    '<table width=225 border="0" cellspacing="0" cellpadding="0" style="border:1px #000000 solid;border-collapse: collapse;background-color:#000000">' +
    '<tr style="height:30px">' +
    '<td colspan=21 bgcolor=#cccccc>' +
    '<table cellpadding="0" cellspacing="1" border="0" style="border-collapse: collapse">' +
    '<tr>' +
    '<td width="3"><input type="text" name="DisColor" size="6" disabled style="border:solid 1px #000000;background-color:#ffff00"></td>' +
    '<td width="3"><input type="text" name="HexColor" size="7" style="border:inset 1px;font-family:Arial;" value="#000000"></td>' +
     '<td width="3"><button type="button" class="btn btn-primary btn-sm" id="btnSave">确认</button></td>' +
    '</tr>' +
    '</table>' +
    '</td>' +
    '</tr>' +
    '</table>';
    $("#colorpanel").append(colorTable);
  }
  function initSignature() {
    if (window.requestAnimFrame) {
      var signature = $("#mySignature");
      signature.jqSignature({ width: 500, height: 200, border: '1px solid red', background: '#16A085', lineColor: '#ABCDEF', lineWidth: 2, autoFit: false });
      //{ width: 600, height: 200, border: '1px solid red', background: '#16A085', lineColor: '#ABCDEF', lineWidth: 2, autoFit: true }
    } else {
      alert("请加载jq-signature.js");
      return;
    }
  }
  function showRGB(arr) {
    hexcode = "#";
    for (x = 0; x < 3; x++) {
      var n = arr[x];
      if (n == "") n = "0";
      if (parseInt(n) != n)
        return alert("RGB颜色值不是数字！");
      if (n > 255)
        return alert("RGB颜色数字必须在0-255之间！");
      var c = "0123456789ABCDEF", b = "", a = n % 16;
      b = c.substr(a, 1); a = (n - a) / 16;
      hexcode += c.substr(a, 1) + b
    }
    return hexcode;
  }
  function init() {
  }
  return {
    init: function () {
      init();
    }
  };


　　 来源博客园

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Related Article
HTML超文本标记语言--超在那里？（文档分析）HTML超文本标记语言--超在那里？（文档分析）Aug 02, 2022 pm 06:04 PM

本篇文章带大家了解一下HTML（超文本标记语言），介绍一下HTML的本质，HTML文档的结构、HTML文档的基本标签和图像标签、列表、表格标签、媒体元素、表单，希望对大家有所帮助！

html和css算编程语言吗html和css算编程语言吗Sep 21, 2022 pm 04:09 PM

不算。html是一种用来告知浏览器如何组织页面的标记语言，而CSS是一种用来表现HTML或XML等文件样式的样式设计语言；html和css不具备很强的逻辑性和流程控制功能，缺乏灵活性，且html和css不能按照人类的设计对一件工作进行重复的循环，直至得到让人类满意的答案。

web前端笔试题库之HTML篇web前端笔试题库之HTML篇Apr 21, 2022 am 11:56 AM

总结了一些web前端面试（笔试）题分享给大家，本篇文章就先给大家分享HTML部分的笔试题（附答案），大家可以自己做做，看看能答对几个！

总结HTML中a标签的使用方法及跳转方式总结HTML中a标签的使用方法及跳转方式Aug 05, 2022 am 09:18 AM

本文给大家总结介绍a标签使用方法和跳转方式，希望对大家有所帮助！

HTML5中画布标签是什么HTML5中画布标签是什么May 18, 2022 pm 04:55 PM

HTML5中画布标签是“<canvas>”。canvas标签用于图形的绘制，它只是一个矩形的图形容器，绘制图形必须通过脚本（通常是JavaScript）来完成；开发者可利用多种js方法来在canvas中绘制路径、盒、圆、字符以及添加图像等。

html中document是什么html中document是什么Jun 17, 2022 pm 04:18 PM

在html中，document是文档对象的意思，代表浏览器窗口的文档；document对象是window对象的子对象，所以可通过“window.document”属性对其进行访问，每个载入浏览器的HTML文档都会成为Document对象。

html5废弃了哪个列表标签html5废弃了哪个列表标签Jun 01, 2022 pm 06:32 PM

html5废弃了dir列表标签。dir标签被用来定义目录列表，一般和li标签配合使用，在dir标签对中通过li标签来设置列表项，语法“<dir><li>列表项值</li>...</dir>”。HTML5已经不支持dir，可使用ul标签取代。

Html5怎么取消td边框Html5怎么取消td边框May 18, 2022 pm 06:57 PM

3种取消方法：1、给td元素添加“border:none”无边框样式即可，语法“td{border:none}”。2、给td元素添加“border:0”样式，语法“td{border:0;}”，将td边框的宽度设置为0即可。3、给td元素添加“border:transparent”样式，语法“td{border:transparent;}”，将td边框的颜色设置为透明即可。

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Show More

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
1 months agoBy尊渡假赌尊渡假赌尊渡假赌
How Long Does It Take To Beat Split Fiction?
4 weeks agoByDDD
R.E.P.O. Save File Location: Where Is It & How to Protect It?
4 weeks agoByDDD
Two Point Museum: All Exhibits And Where To Find Them
1 months agoBy尊渡假赌尊渡假赌尊渡假赌
Show More

Hot Tools

MantisBT

MantisBT

Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

Atom editor mac version download

Atom editor mac version download

The most popular open source editor

Dreamweaver Mac version

Dreamweaver Mac version

Visual web development tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 English version

SublimeText3 English version

Recommended: Win version, supports code prompts!

Show More

Hot Topics

Where is the login entrance for gmail email?
7378
15
Java Tutorial
1628
14
CakePHP Tutorial
1357
52
Laravel Tutorial
1267
25
PHP Tutorial
1216
29
Show More