touch html 5 canvas trouble

Question

我有一个画布元素，我在webview中使用（钛手机）我有简单的事件处理程序的问题。当我触摸画布开始绘制线条时，线条在大约1秒的绘图后跳到画布的中心点，然后工作正常。如果我保持触摸约1秒。然后画出它的作品很棒...？我很困惑，谁能帮我解决这个问题。这里是我使用的代码，我在网上找到了这个资源并对其进行了修改。

// Keep everything in anonymous function, called on window load. 
if(window.addEventListener) { 
window.addEventListener('load', function() { 
var canvas, context, canvaso, contexto; 

// The active tool instance. 
var tool; 



var tool_default = 'bluepen'; 

function init() { 
// Find the canvas element. 
canvaso = document.getElementById('markup'); 
if (!canvaso) { 
    alert('Error: I cannot find the canvas element!'); 
    return; 
} 

if (!canvaso.getContext) { 
    alert('Error: no canvas.getContext!'); 
    return; 
} 

// Get the 2D canvas context. 
contexto = canvaso.getContext('2d'); 
if (!contexto) { 
    alert('Error: failed to getContext!'); 
    return; 
} 

// Add the temporary canvas. 
var container = canvaso.parentNode; 
canvas = document.createElement('canvas'); 
if (!canvas) { 
    alert('Error: I cannot create a new canvas element!'); 
    return; 
} 

canvas.id  = 'markupTemp'; 
canvas.width = canvaso.width; 
canvas.height = canvaso.height; 
canvas.display = 'none'; 
container.appendChild(canvas); 

context = canvas.getContext('2d'); 

// Get the tool select input. 
var tool_select = document.getElementById('dtool'); 
if (!tool_select) { 
    alert('Error: failed to get the dtool element!'); 
    return; 
} 
tool_select.addEventListener('change', ev_tool_change, false); 






// Activate the default tool. 
if (tools[tool_default]) { 
    tool = new tools[tool_default](); 
    tool_select.value = tool_default; 
} 

// Attach the mousedown, mousemove and mouseup event listeners. 
    canvas.addEventListener('mousedown', ev_canvas, false); 
    canvas.addEventListener('mousemove', ev_canvas, false); 
    canvas.addEventListener('mouseup', ev_canvas, false); 
canvas.addEventListener('touchstart', ev_canvas, false); 
canvas.addEventListener('touchmove', ev_canvas, false); 
canvas.addEventListener('touchend', ev_canvas, false); 
    } 


function settool(t){ 

tool = this; 

}; 


    // The general-purpose event handler. This function just determines the mouse 
    // position relative to the canvas element. 
    function ev_canvas (ev) { 
    ev.preventDefault(); 

    ev._x = ev.layerX; 
    ev._y = ev.layerY; 

// Call the event handler of the tool. 
var func = tool[ev.type]; 
if (func) { 
    func(ev); 
} 
} 

    // The event handler for any changes made to the tool selector. 
    function ev_tool_change (ev) { 
if (tools[this.value]) { 
    tool = new tools[this.value](); 
} 
} 

// This function draws the #imageTemp canvas on top of #markup, after which 
// #imageTemp is cleared. This function is called each time when the user 
// completes a drawing operation. 
function img_update() { 
    contexto.drawImage(canvas, 0, 0); 
    context.clearRect(0, 0, canvas.width, canvas.height); 
} 

// This object holds the implementation of each drawing tool. 
var tools = {}; 

    // The drawing pencil. 
tools.bluepen = function() { 
var tool = this; 
this.started = false; 

// This is called when you start holding down the mouse button. 
// This starts the pencil drawing. 
this.mousedown = function (ev) { 
    ev.preventDefault(); 
    context.beginPath(); 
    context.moveTo(ev._x, ev._y); 
    tool.started = true; 
}; 


// This function is called every time you move the mouse. Obviously, it only 
// draws if the tool.started state is set to true (when you are holding down 
// the mouse button). 
this.mousemove = function (ev) { 
    if (tool.started) { 
     ev.preventDefault(); 
    context.lineTo(ev._x, ev._y); 
     context.lineJoin = "round"; 
    context.lineWidth = 1; 
    context.strokeStyle = '#2e3092'; 
    context.stroke(); 
    } 
}; 

// This is called when you release the mouse button. 
this.mouseup = function (ev) { 
    if (tool.started) { 
     ev.preventDefault(); 
    tool.mousemove(ev); 
    tool.started = false; 
    img_update(); 
    } 
}; 

}; 

// The red Pen. 
tools.redpen = function() { 
var tool = this; 
this.started = false; 

// This is called when you start holding down the mouse button. 
// This starts the pencil drawing. 
this.mousedown = function (ev) { 
    context.beginPath(); 
    context.moveTo(ev._x, ev._y); 
    tool.started = true; 
}; 

// This function is called every time you move the mouse. Obviously, it only 
// draws if the tool.started state is set to true (when you are holding down 
// the mouse button). 
this.mousemove = function (ev) { 
    if (tool.started) { 
    context.lineTo(ev._x, ev._y); 
     context.lineJoin = "round"; 
    context.lineWidth = 1; 
    context.strokeStyle = '#ed1c24'; 
    context.stroke(); 
    } 
}; 

// This is called when you release the mouse button. 
this.mouseup = function (ev) { 
    if (tool.started) { 
    tool.mousemove(ev); 
    tool.started = false; 
    img_update(); 
    } 
}; 
}; 



// The Highlighter 
tools.highlighter = function() { 
var tool = this; 
this.started = false; 

// This is called when you start holding down the mouse button. 
// This starts the pencil drawing. 
this.mousedown = function (ev) { 
    context.beginPath(); 
    context.moveTo(ev._x, ev._y); 
    tool.started = true; 
}; 

// This function is called every time you move the mouse. Obviously, it only 
// draws if the tool.started state is set to true (when you are holding down 
// the mouse button). 
this.mousemove = function (ev) { 
    if (tool.started) { 
    context.lineTo(ev._x, ev._y); 
    context.lineJoin = "round"; 
    context.lineWidth = 20; 
    context.strokeStyle = '#f9e100'; 
    context.stroke(); 

    } 
}; 

// This is called when you release the mouse button. 
this.mouseup = function (ev) { 
    if (tool.started) { 
    tool.mousemove(ev); 
    tool.started = false; 
    img_update(); 
    } 
}; 
}; 

// The Eraser 
tools.eraser = function() { 
var tool = this; 
this.started = false; 

// This is called when you start holding down the mouse button. 
// This starts the pencil drawing. 
this.mousedown = function (ev) { 
    context.beginPath(); 
    context.moveTo(ev._x, ev._y); 
    tool.started = true; 
}; 

// This function is called every time you move the mouse. Obviously, it only 
// draws if the tool.started state is set to true (when you are holding down 
// the mouse button). 
this.mousemove = function (ev) { 
    if (tool.started) { 
    context.lineTo(ev._x, ev._y); 
    context.lineJoin = "round"; 
    context.lineWidth = 40; 
    context.strokeStyle = '#fff'; 

    context.stroke(); 

    } 
    }; 

    // This is called when you release the mouse button. 
    this.mouseup = function (ev) { 
    if (tool.started) { 
    tool.mousemove(ev); 
    tool.started = false; 
    img_update(); 
    } 
}; 
}; 




init(); 

}, false); } 

Answer 1

我对Acer ICS平板电脑上的股票Android浏览器有这个问题（事实上，我发现你的问题）。我无法在iPad上的Safari上或在我的姜饼手机上的股票浏览器上复制问题。我不知道它是一个浏览器错误还是什么，但我设法找出一个可能对您有帮助的解决方法。

var tool; 
var touchflag = false; //Add this property 
... 
... 
function ev_canvas (ev) { 
    ev.preventDefault(); 

    //Two new lines here 
    if (ev.type == 'touchstart') this.touchflag = true; 
    if (ev.type == 'touchend') this.touchflag = false; 

    ev._x = ev.layerX; 
    ev._y = ev.layerY; 
    ... 
} 

... 
... 
this.mousemove = function (ev) { 
    // if (tool.started) { //Change this 
    if (tool.started && !touchflag) { // to this 
     ev.preventDefault(); 
     context.lineTo(ev._x, ev._y); 
    ... 
    } 
}; 

这是klugy，火腿和不雅，但它为我工作。希望它可以帮助你。