Touch draw events and HTML5 Canvas
I'm trying to write a canvas element that can be 'draw' on with the mouse and mobile (iOS/Android).
here is my bind code:
// Mouse based interface $(drawing.canvas).bind('mousedown', drawing.drawStart); $(drawing.canvas).bind('mousemove', drawing.draw); $(drawing.canvas).bind('mouseup', drawing.drawEnd); $('body').bind('mouseup', drawing.drawEnd); $(drawing.canvas).bind('touchstart', drawing.drawStart); $(drawing.canvas).bind('touchmove', drawing.draw); $(drawing.canvas).bind('touchend', drawing.drawEnd);
Works with computer (PC, Mac) but not mobile (iOS/Android). I als开发者_开发技巧o tried addEventListener
for the touch*
events but no joy.
Any ideas?
It is either a sytax error or a jQuery problem. Distilled down, canvas.addEventListener( 'touchstart', onTouchStart, false);
works just fine for android:
http://jsfiddle.net/tQW2L/
(on touch it paints a large black rectangle to confirm that it works)
精彩评论