我正在编写一个用于在移动设备上捕获签名的组件。我的代码在 iOS 和 Android 上都运行良好。但并非在所有设备上。
例如，我在 Galaxy Tab 2 7.0 上进行测试，一切正常。我在 Android 浏览器、Chrome、FF、Opera 和 Maxthon 中进行了测试。没有问题。
现在在我的 Galaxy Note 2 上进行测试，我想知道为什么它在 Chrome 中不起作用。没有错误。我的 javascript 工作正常。但是输入不会呈现到我的画布上。在 Android 浏览器中，它按预期工作。
有任何想法吗？
这是我的处理程序：
var canvas = document.getElementById('canvas');
var startedPainting = false;
canvas.addEventListener("mousedown", handleStart, false);
canvas.addEventListener("mousemove", handleMove, false);
canvas.addEventListener("mouseup", handleEnd, false);
canvas.addEventListener("touchstart", handleStart, false);
canvas.addEventListener("touchmove", handleMove, false);
canvas.addEventListener("touchend", handleEnd, false);
function handleStart(evt) {
evt.preventDefault();
startedPainting = true;
var el = $("#canvas").get(0);
var ctx = el.getContext("2d");
ctx.lineWidth = 3;
var touches = evt.changedTouches;
if (touches) {
ctx.moveTo(touches[0].pageX - el.offsetLeft, touches[0].pageY - el.offsetTop);
for (var i=0; i<touches.length; i++) {
ctx.lineTo(touches[i].pageX - el.offsetLeft, touches[i].pageY - el.offsetTop);
}
}
else{
ctx.moveTo(evt.pageX - el.offsetLeft, evt.pageY - el.offsetTop);
ctx.lineTo(evt.pageX - el.offsetLeft, evt.pageY - el.offsetTop);
}
ctx.stroke();
}
function handleMove(evt) {
evt.preventDefault();
if (startedPainting) {
var el = $("#canvas").get(0);
var ctx = el.getContext("2d");
ctx.lineWidth = 3;
var touches = evt.changedTouches;
if (touches) {
for (var i=0; i<touches.length; i++) {
ctx.lineTo(touches[i].pageX - el.offsetLeft, touches[i].pageY - el.offsetTop);
}
}
else{
ctx.lineTo(evt.pageX - el.offsetLeft, evt.pageY - el.offsetTop);
}
ctx.stroke();
}
}
function handleEnd(evt) {
evt.preventDefault();
startedPainting = false;
var el = $("#canvas").get(0);
var ctx = el.getContext("2d");
ctx.lineWidth = 3;
var touches = evt.changedTouches;
if (touches) {
for (var i=0; i<touches.length; i++) {
ctx.lineTo(touches[i].pageX - el.offsetLeft, touches[i].pageY - el.offsetTop);
}
}
else{
ctx.lineTo(evt.pageX - el.offsetLeft, evt.pageY - el.offsetTop);
}
ctx.stroke();
}