<canvas>图形在Firefox上损坏，华为Mediapad 10，Android4.1.2

Question

对于安卓和html5画布，我面临一个奇怪的问题。

我有一张可以让顾客签字的表格。该表单将完美地工作在比如说chrome (屏幕截图1)上，但当用户试图在Firefox上为android签名时，它就会慌张起来。

签名垫的JS代码来自http://www.zetakey.com/codesample-signature.php

js代码如下：

// JavaScript Document

function signatureCapture() {

    //Actual Code starts here

    var parent=document.getElementById("canvas");
    parent.childNodes[0].nodeValue = "";

    var canvasArea=document.createElement("canvas");
    canvasArea.setAttribute("id", "newSignature");
    parent.appendChild(canvasArea);

    var canvas = document.getElementById("newSignature");
    var context = canvas.getContext("2d");

    if (!context) {
        throw new Error("Failed to get canvas' 2d context");
    }

    screenwidth = screen.width;

    //if (screenwidth < 480){
    //  canvas.width = screenwidth - 8 ;
    //  canvas.height = (screenwidth * 0.63) ;
    //}
    //else {
        canvas.width = 460 ;
        canvas.height = 300 ;
    //}

    context.fillStyle = "#fff";
    context.strokeStyle = "#444";
    context.lineWidth = 1.2;
    context.lineCap = "round";

    context.fillRect(0, 0, canvas.width, canvas.height);

    context.fillStyle = "#3a87ad";
    context.strokeStyle = "#3a87ad";
    context.lineWidth = 1;
    context.moveTo((canvas.width*0.042),(canvas.height * 0.7));
    context.lineTo((canvas.width*0.958),(canvas.height * 0.7));
    context.stroke();

    context.fillStyle = "#fff";
    context.strokeStyle = "#444";


    var disableSave = true;
    var pixels = [];
    var cpixels = [];
    var xyLast = {};
    var xyAddLast = {};
    var calculate = false;

    //functions
    {
        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_board_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('mousemove', on_mousemove, false);
            canvas.addEventListener('mouseup', on_mouseup, false);
            canvas.addEventListener('touchmove', on_mousemove, false);
            canvas.addEventListener('touchend', on_mouseup, false);

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

            empty = false;
            var xy = get_board_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_board_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;
        };

    }//end

    canvas.addEventListener('mousedown', on_mousedown, false);
    canvas.addEventListener('touchstart', on_mousedown, false);
}

function signatureSave() {

    var canvas = document.getElementById("newSignature");
    // save canvas image as data url (png format by default)
    var dataURL = canvas.toDataURL("image/png");
    document.getElementById("saveSignature").src = dataURL;


};
function signaturePost() {
    var canvas = document.getElementById("newSignature");
    // save canvas image as data url (png format by default)
    document.getElementById('postSignature').value = canvas.toDataURL('image/png');
    document.forms["submit_signature"].submit()

}

/*
Reload page instead of this function:

function signatureClear() {


    var parent=document.getElementById("canvas");
    var child=document.getElementById("newSignature");
    parent.removeChild(child);

    signatureCapture();


}
*/

// http://stackoverflow.com/questions/11385471/save-canvas-image-post-the-data-string-to-php


function signatureSend() {
    var canvas = document.getElementById("newSignature");
    var dataURL = canvas.toDataURL("image/png");
    document.getElementById("saveSignature").src = dataURL;
    var sendemail = document.getElementById('sendemail').value;
    var replyemail = document.getElementById('replyemail').value;

var form = document.createElement("form");
form.setAttribute("action","upload_file.php");
form.setAttribute("enctype","multipart/form-data");
form.setAttribute("method","POST");
form.setAttribute("target","_self");
form.innerHTML = '<input type="text" name="image" value="'+dataURL+'"/>'+'<input type="email" name="email" value="'+sendemail+'"/>'+'<input type="email" name="replyemail" value="'+replyemail+'"/>';
form.submit();
}

我已经实现了代码，它在Chrome中运行得很好

​

但它在火狐上乱窜

​

​

我在华为mediapad 10上使用firefox 29.0.1运行android 4.1.2

有什么想法吗？

更新:下面是显示工作中的全部代码的小提琴：http://jsfiddle.net/3KHAf/

Answer 1

基于图像中的工件，我怀疑这是一个bug --设备图形驱动程序代码和Firefox步骤。在移动世界里没有什么是闻所未闻的。或者它也可能是Firefox本身的错误，但我发现这个选项不太可能。

我建议采取以下步骤

• 检查一下，您能在其他Android设备上重复这个问题吗？
• 将导致图形化工件的代码隔离到jsfiddle.net测试用例，其中只有触发问题的源代码行。共享该链接，供其他人测试该问题。
• 报告一个针对火狐移动https://bugzilla.mozilla.org/的bug

如果bug位于Mozilla的一边，并且是可重复的，那么它们通常会很快地修复这些错误。

在#mobile上有一个irc.mozilla.org频道，您可以在那里寻求进一步的帮助。