javascript + html5 canvas：携帯端末でドラッグ/スクロールする代わりに描画しますか？

私はhtml5キャンバスといくつかのjavascript（onmousedown/move/up）を使ってウェブページ上に単純なドローパッドを作成しています。javascript + html5 canvas：携帯端末でドラッグ/スクロールする代わりに描画しますか？

Opera、Firefox、Chromeなどで正常に動作します（デスクトップPCで試してみました）。しかし、iPhoneでこのページにアクセスすると、キャンバスに描画しようとすると、ページがドラッグまたはスクロールされます。

これは他のページのコンテンツでも問題ありません。ページを上にスライドさせると、いつものようにモバイルブラウザでそのページをナビゲートできます。しかし、キャンバス上でこの動作を無効にする方法があるので、モバイルの訪問者が実際に何かを描くことができますか？あなたの参考のために

は、ここにminimalisic例です：

<html><head><script type='text/javascript'> 
function init() 
{ 
    var canvas = document.getElementById('MyCanvas'); 
    var ctx = canvas.getContext('2d'); 
    var x = null; 
    var y; 
    canvas.onmousedown = function(e) 
    { 
    x = e.pageX - canvas.offsetLeft; 
    y = e.pageY - canvas.offsetTop; 
    ctx.beginPath(); 
    ctx.moveTo(x,y); 
    } 
    canvas.onmouseup = function(e) 
    { 
    x = null; 
    } 
    canvas.onmousemove = function(e) 
    { 
    if (x==null) return; 
    x = e.pageX - canvas.offsetLeft; 
    y = e.pageY - canvas.offsetLeft; 
    ctx.lineTo(x,y); 
    ctx.stroke(); 
    } 
} 
</script></head><body onload='init()'> 
<canvas id='MyCanvas' width='500' height='500' style='border:1px solid #777'> 
</canvas></body></html>

は、私はキャンバスにスワイプすると、ページをスクロールする/ドラッグ避けるために、キャンバスに追加する必要があり、いくつかの特別なスタイルやイベントはありますか？

出典

2012-04-02 Sheldon Pinkman

iPad/iPhoneにはマウス*イベントがありません。 touchstart,touchmoveおよびtouchendを使用する必要があります。あなたはこのような最初のものを取得する必要がありますので、このイベントは、複数のタッチを持つことができます。

canvas.ontouchstart = function(e) { 
    if (e.touches) e = e.touches[0]; 
    return false; 
}

をそうでない場合は、ページのスクロールがトリガされたので、それはタッチスタート方式でreturn falseに重要です。

出典

2012-04-02 11:57:22 Grassator

ああ、意味があります。前に気づいたことはありません。ありがとう！ –

これはAndroidでは動作しませんが、仕様に従ってhttp://www.preventDefault（）;を使用できます。http://www.w3.org/TR/touch-events/#the-touchstart------ ---イベント – lapo

javascript + html5 canvas：携帯端末でドラッグ/スクロールする代わりに描画しますか？

答えて

関連する問題