javascript - 使用我在模拟器中创建的 Canvas 签名板它工作正常但在 android 设备中两个签名板即将到来

Question

使用 HTML5、Cordova 3.1、Canvas、Javascript 我正在制作一个应用程序，其中借助 help canvas 我制作了一个签名板，它在模拟器中工作正常但是当我试图在 android 设备上运行时，两个签名板即将出现请帮我解决我在编码时犯的错误

在 HTML5 中:-

    <canvas id='newSignature'> </canvas>

在 JS 中:-

  var canvas = document.getElementById('newSignature');
  var context = canvas.getContext("2d");
   canvas.width = 276;
   canvas.height = 180;
   context.fillStyle = "#fff";
   context.strokeStyle = "#444";
   context.lineWidth = 1.5;
   context.lineCap = "round";
   context.fillRect(0, 0, canvas.width, canvas.height);
   Add event listener for `click` events.
  canvas.addEventListener('click', function(event) {
   alert("hello can vas");


   var disableSave = true;
var pixels = [];
var cpixels = [];
var xyLast = {};
var xyAddLast = {};
var calculate = false;
{ 
    function remove_event_listeners() {
        canvas.removeEventListener('mousemove', on_mousemove, false);
        canvas.removeEventListener('mouseup', on_mouseup, false);
       canvas.removeEventListener('touchmove', on_mousemove, false);
        canvas.removeEventListener('touchend', on_mouseup, false);

       document.body.removeEventListener('mouseup', on_mouseup, false);
        document.body.removeEventListener('touchend', on_mouseup, false);
    }

    function get_coords(e) {
        var x, y;

        if (e.changedTouches && e.changedTouches[0]) {
            var offsety = canvas.offsetTop || 0;
            var offsetx = canvas.offsetLeft || 0;

            x = e.changedTouches[0].pageX - offsetx;
            y = e.changedTouches[0].pageY - offsety;
        } else if (e.layerX || 0 == e.layerX) {
            x = e.layerX;
            y = e.layerY;
        } else if (e.offsetX || 0 == e.offsetX) {
            x = e.offsetX;
            y = e.offsetY;
        }

        return {
            x: x,
            y: y
        };
    };

    function on_mousedown(e) {
        e.preventDefault();
        e.stopPropagation();

       canvas.addEventListener('mouseup', on_mouseup, false);
        canvas.addEventListener('mousemove', on_mousemove, false);
        canvas.addEventListener('touchend', on_mouseup, false);
        canvas.addEventListener('touchmove', on_mousemove, false);
       document.body.addEventListener('mouseup', on_mouseup, false);
        document.body.addEventListener('touchend', on_mouseup, false);
        empty = false;
        var xy = get_coords(e);
        context.beginPath();
        pixels.push('moveStart');
        context.moveTo(xy.x, xy.y);
        pixels.push(xy.x, xy.y);
        xyLast = xy;
    };

    function on_mousemove(e, finish) {
        e.preventDefault();
        e.stopPropagation();
        var xy = get_coords(e);
        var xyAdd = {
            x: (xyLast.x + xy.x) / 2,
            y: (xyLast.y + xy.y) / 2
        };
        if (calculate) {
            var xLast = (xyAddLast.x + xyLast.x + xyAdd.x) / 3;
            var yLast = (xyAddLast.y + xyLast.y + xyAdd.y) / 3;
            pixels.push(xLast, yLast);
        } else {
            calculate = true;
        }
        context.quadraticCurveTo(xyLast.x, xyLast.y, xyAdd.x, xyAdd.y);
        pixels.push(xyAdd.x, xyAdd.y);
        context.stroke();
        context.beginPath();
        context.moveTo(xyAdd.x, xyAdd.y);
        xyAddLast = xyAdd;
        xyLast = xy;

    };

    function on_mouseup(e) {
        remove_event_listeners();
        disableSave = false;
        context.stroke();
        pixels.push('e');
        calculate = false;
    };
}
  canvas.addEventListener('touchstart', on_mousedown, false);
  canvas.addEventListener('mousedown', on_mousedown, false);

}, false);

Answer 1

作为您在 Canvas 中工作的问题，您希望使用 touchmove 事件捕获用户签名。出于签名目的，您可以使用此插件 https://github.com/thomasjbradley/signature-pad

因为您想使用 cordova 和 Jquery mobile...

然后你必须改变插件文件中的一个变量

$.fn.signaturePad.defaults={
//drawIt : '.drawIt a'    actula code remove anchor tag

drawIt : '.drawIt'        you can use where you want in any canvas
};