我在使用 firefox for android 和 html5 canvas 时遇到了一个奇怪的问题。
我有一个允许客户签名的表格。该表单可以在 chrome(屏幕截图 1)上完美运行，但会在客户尝试登录 Firefox for 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 中运行良好 
但它在 firefox 中乱码
我在运行 android 4.1.2 的 HUAWEI mediapad 10 上使用 firefox 29.0.1
有什么想法吗？
更新:这是一个 fiddle ，显示了整个工作代码: http://jsfiddle.net/3KHAf/
最佳答案
根据图像中的瑕疵，我怀疑这是设备图形驱动程序代码和 Firefox 踩踏的错误。在移动世界中没有什么闻所未闻的。或者它也可能是 Firefox 本身的错误，但我发现这个选项不太可能。
我建议采取以下步骤
检查您能否在其他 Android 设备上重复该问题
将导致图形伪像的代码隔离到 jsfiddle.net 测试用例中，您只剩下触发问题的源代码行。分享链接以供其他人测试问题。
报告针对 Firefox Mobile 的错误 https://bugzilla.mozilla.org/
如果错误在 Mozilla 一方并且是可重复的，他们通常会很快修复这些错误。
irc.mozilla.org 上有一个#mobile channel ，您可以在这里寻求进一步的帮助。
关于javascript - <canvas> 绘图在 Firefox Mobile、HUAWEI Mediapad 10、Android 4.1.2 上损坏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23586005/