开发者

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)

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜