検索
ホームページウェブフロントエンドH5 チュートリアルHTML5 中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();
    }
  };


　　 来源博客园

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
関連記事
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部分的笔试题（附答案），大家可以自己做做，看看能答对几个！

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

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

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

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

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

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

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

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

html5支持boolean值属性吗html5支持boolean值属性吗Apr 22, 2022 pm 04:56 PM

html5支持boolean值属性；boolean值属性指是属性值为true或者false的属性，如input元素中的disabled属性，不使用该属性表示值为flase，不禁用元素，使用该属性可以不设置属性值表示值为true，禁用元素。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

もっと見る

人気の記事

R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）
2週間前By尊渡假赌尊渡假赌尊渡假赌
レポ：チームメイトを復活させる方法
4週間前By尊渡假赌尊渡假赌尊渡假赌
ハローキティアイランドアドベンチャー：巨大な種を手に入れる方法
4週間前By尊渡假赌尊渡假赌尊渡假赌
スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか？
3週間前ByDDD
R.E.P.O.ファイルの保存場所：それはどこにあり、それを保護する方法は？
3週間前ByDDD
もっと見る

ホットツール

DVWA

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

PhpStorm Mac バージョン

PhpStorm Mac バージョン

最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？
7324
9
Java チュートリアル
1625
14
CakePHP チュートリアル
1350
46
Laravel チュートリアル
1262
25
PHP チュートリアル
1209
29
もっと見る