首页 >web前端 >H5教程 >详解HTML5中canvas支持触摸屏的签名面板的示例代码

详解HTML5中canvas支持触摸屏的签名面板的示例代码

黄舟
黄舟原创
2017-03-21 15:31:063031浏览

1.前言

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

2.canvcas标签

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

3.手写签名面板

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

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, $) {
    &#39;use strict&#39;;

  // 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 = &#39;jqSignature&#39;,
      defaults = {
        lineColor: &#39;#222222&#39;,
        lineWidth: 1,
        border: &#39;1px dashed #CCFF99&#39;,
        background: &#39;#FFFFFF&#39;,
        width: 500,
        height: 200,
        autoFit: false
      },
      canvasFixture = &#39;<canvas></canvas>&#39;;

  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: &#39;border-box&#39;,
        width: this.settings.width + &#39;px&#39;,
        height: this.settings.height + &#39;px&#39;,
        border: this.settings.border,
        background: this.settings.background,
        cursor: &#39;crosshair&#39;
      });
      // 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(&#39;mousedown touchstart&#39;, $.proxy(function(e) {
        this.drawing = true;
        this.lastPos = this.currentPos = this._getPosition(e);
      }, this));
      this.$canvas.on(&#39;mousemove touchmove&#39;, $.proxy(function(e) {
        this.currentPos = this._getPosition(e);
      }, this));
      this.$canvas.on(&#39;mouseup touchend&#39;, $.proxy(function(e) {
        this.drawing = false;
        // Trigger a change event
        var changedEvent = $.Event(&#39;jq.signature.changed&#39;);
        this.$element.trigger(changedEvent);
      }, this));
      // Prevent document scrolling when touching canvas
      $(document).on(&#39;touchstart touchmove touchend&#39;, $.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(&#39;touch&#39;) !== -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(&#39;width&#39;, width);
      this.$canvas.css(&#39;width&#39;, width + &#39;px&#39;);
    }
  };

  /*
  * Plugin wrapper and initialization
  */

  $.fn[pluginName] = function ( options ) {
    var args = arguments;
    if (options === undefined || typeof options === &#39;object&#39;) {
      return this.each(function () {
        if (!$.data(this, &#39;plugin_&#39; + pluginName)) {
          $.data(this, &#39;plugin_&#39; + pluginName, new Signature( this, options ));
        }
      });
    } 
    else if (typeof options === &#39;string&#39; && options[0] !== &#39;_&#39; && options !== &#39;init&#39;) {
      var returns;
      this.each(function () {
        var instance = $.data(this, &#39;plugin_&#39; + pluginName);
        if (instance instanceof Signature && typeof instance[options] === &#39;function&#39;) {
            var myArr=Array.prototype.slice.call( args, 1 );
            returns = instance[options].apply(instance, myArr);
        }
        if (options === &#39;destroy&#39;) {
          $.data(this, &#39;plugin_&#39; + pluginName, null);
        }
        //if (options === &#39;reLoadData&#39;) {
        //    //this.$canvas.remove();
        //    $.data(this, &#39;plugin_&#39; + 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 () {
            $(&#39;#mymodal&#39;).modal(&#39;hide&#39;);
            $("#mymodal").remove();

        });

        $(document).on("click", "#mySave", null, function () {

            var myImg = $(&#39;#myImg&#39;).empty();
            var dataUrl = $(&#39;.js-signature&#39;).jqSignature(&#39;getDataURL&#39;);
            var img = $(&#39;<img>&#39;).attr(&#39;src&#39;, dataUrl);
            $(myImg).append($(&#39;<p>&#39;).text("图片保存在这里"));
            $(myImg).append(img);

        });

        $(document).on("click", "#myEmpty", null, function () {
            $(&#39;.js-signature&#39;).jqSignature(&#39;clearCanvas&#39;);

        });

        $(document).on("click", "#myBackColor", null, function () {

            $(&#39;#colorpanel&#39;).css(&#39;left&#39;, &#39;95px&#39;).css(&#39;top&#39;, &#39;45px&#39;).css("display", "block").fadeIn();
            //$("canvas").css("background", "#EEEEEE");
            $("#btnSave").data("sender", "#myBackColor");
        });

        $(document).on("click", "#myColor", null, function () {
            $(&#39;#colorpanel&#39;).css(&#39;left&#39;, &#39;205px&#39;).css(&#39;top&#39;, &#39;45px&#39;).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(&#39;,&#39;);
                //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(&#39;,&#39;);
                    var num = showRGB(strArr);
                    $("input[name=HexColor]").val(num);
                }
            }

        });

        $(document).on("click", "#btnSave", null, function () {

            $(&#39;#colorpanel&#39;).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;
                $(&#39;.js-signature&#39;).jqSignature(&#39;reLoadData&#39;);
            }
            if (typeData == "#myBackColor") {

                data["plugin_jqSignature"]["settings"]["background"] = HexColor;
                $(&#39;.js-signature&#39;).jqSignature(&#39;reLoadData&#39;);
            }
        });

        $("#mymodal").on(&#39;hide.bs.modal&#39;, function () {
            $("#colorpanel").remove();
            $("#mymodal").remove();
            $("#myTable").remove();
        });

    });

    function initHtml() {

        var html = &#39;<div class="modal" id="mymodal">&#39; +
            &#39;<div class="modal-dialog">&#39; +
                &#39;<div class="modal-content">&#39; +
                    &#39;<div class="modal-header">&#39; +
                        &#39;<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span>
                        <span class="sr-only">Close</span></button>&#39; +
                        &#39;<h4 class="modal-title">手写面板</h4>&#39; +
                    &#39;</div>&#39; +
                    &#39;<div class="modal-body">&#39; +
                        &#39;<div class="js-signature" id="mySignature">&#39; +
                         &#39;</div>&#39; +
                         &#39;<div>&#39; +
                         &#39;<button type="button" class="btn btn-default" id="myEmpty">清空面板</button>&#39; +
                         &#39;<button type="button" class="btn btn-default" id="myBackColor">设置背景颜色</button>&#39; +
                         //&#39;<div style="position:absolute;relative">&#39; +
                         &#39;<button type="button" class="btn btn-default" id="myColor">设置字体颜色</button>&#39; +
                         &#39;<div id="colorpanel" style="position:absolute;z-index:99;display:none"></div>&#39; +
                         //&#39;</div>&#39;+
                         &#39;</div>&#39; +
                    &#39;</div>&#39; +
                    &#39;<div class="modal-footer">&#39; +

                        &#39;<button type="button" class="btn btn-default" id="myClose">关闭</button>&#39; +
                        &#39;<button type="button" class="btn btn-primary" id="mySave">保存</button>&#39; +
                        &#39;<div id="myImg">&#39; +
                        &#39;<div>&#39; +

                    &#39;</div>&#39; +
                &#39;</div>&#39; +
            &#39;</div>&#39; +
        &#39;</div>&#39;;

        $(&#39;body&#39;).append(html);
    }

    function initTable() {
        var colorTable = "";
        var ColorHex = new Array(&#39;00&#39;, &#39;33&#39;, &#39;66&#39;, &#39;99&#39;, &#39;CC&#39;, &#39;FF&#39;);
        var SpColorHex = new Array(&#39;FF0000&#39;, &#39;00FF00&#39;, &#39;0000FF&#39;, &#39;FFFF00&#39;, &#39;00FFFF&#39;, &#39;FF00FF&#39;);
        for (var i = 0; i < 2; i++)
        {
            for (var j = 0; j < 6; j++)
            {
                colorTable = colorTable + &#39;<tr height=12>&#39;;
                colorTable = colorTable + &#39;<td width=11 style="background-color:#000000"></td>&#39;;

                if (i == 0)
                {
                    colorTable = colorTable + &#39;<td width=11 style="background-color:#&#39; + ColorHex[j] + ColorHex[j] + ColorHex[j] + &#39;"></td>&#39;;
                }
                else
                {
                    colorTable = colorTable + &#39;<td width=11 style="background-color:#&#39; + SpColorHex[j] + &#39;"></td>&#39;;
                }

                //colorTable = colorTable + &#39;<td width=11 style="background-color:#000000"></td>&#39;;

                for (var k = 0; k < 3; k++)
                {
                    for (l = 0; l < 6; l++)
                    {
                        colorTable = colorTable + &#39;<td width=11 style="background-color:#&#39; + ColorHex[k + i * 3] + ColorHex[l] + ColorHex[j] + &#39;"></td>&#39;;
                    }
                }
                colorTable = colorTable + &#39;</tr>&#39;;


            }
        }
        colorTable =
        &#39;<table border="1" id="myTable" cellspacing="0" cellpadding="0" style="border-collapse: collapse;cursor:pointer;" bordercolor="000000">&#39;
        + colorTable + &#39;</table>&#39; +
        &#39;<table width=225 border="0" cellspacing="0" cellpadding="0" style="border:1px #000000 solid;border-collapse: collapse;background-color:#000000">&#39; +
        &#39;<tr style="height:30px">&#39; +
        &#39;<td colspan=21 bgcolor=#cccccc>&#39; +

        &#39;<table cellpadding="0" cellspacing="1" border="0" style="border-collapse: collapse">&#39; +
        &#39;<tr>&#39; +
        &#39;<td width="3"><input type="text" name="DisColor" size="6" disabled style="border:solid 1px #000000;background-color:#ffff00"></td>&#39; +
        &#39;<td width="3"><input type="text" name="HexColor" size="7" style="border:inset 1px;font-family:Arial;" value="#000000"></td>&#39; +
         &#39;<td width="3"><button type="button" class="btn btn-primary btn-sm" id="btnSave">确认</button></td>&#39; +
        &#39;</tr>&#39; +
        &#39;</table>&#39; +
       
        &#39;</td>&#39; +
        &#39;</tr>&#39; +
        &#39;</table>&#39;;
        $("#colorpanel").append(colorTable);
    }

    function initSignature() {

        if (window.requestAnimFrame) {
            var signature = $("#mySignature");
            signature.jqSignature({ width: 500, height: 200, border: &#39;1px solid red&#39;, background: &#39;#16A085&#39;, lineColor: &#39;#ABCDEF&#39;, lineWidth: 2, autoFit: false });
            //{ width: 600, height: 200, border: &#39;1px solid red&#39;, background: &#39;#16A085&#39;, lineColor: &#39;#ABCDEF&#39;, 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();
        }
    };
}

 

以上是详解HTML5中canvas支持触摸屏的签名面板的示例代码的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn