1

「touchstart」モバイル イベントと HTML5 キャンバスを使用して、jquery mobile を使用して何かを描画しようとしています。

私はこのhtmlコードを使用します:

<canvas id="canvasTouch">Canvas is not supported</canvas>

および Js コード:

canvas = document.getElementById('canvasTouch');        
context = canvas.getContext('2d');

$(document).bind("touchstart",function(event) {    
    context.beginPath();
    context.arc(event.originalEvent.targetTouches[0].pageX,event.originalEvent.targetTouches[0].pageY, 10, 0, Math.PI*2); 
    context.fill();
    context.closePath();
}

しかし、私の円は省略記号のように見え、かなりぼやけています。

このコードを従来の html ページで試してみたところ、私のデバイスでは問題なく動作しました...

何か考えはありますか？

ありがとう

4

1 に答える 1

2

コンテキストの幅と高さを正しい値 (通常はキャンバス要素の寸法) に設定しましたか?

要素とコンテキストのサイズが異なると、予想される 1:1 のピクセル マッピングが崩れ、歪みやぼやけが発生します。属性またはスクリプトで要素のサイズを変更している場合、これは特に重要です (頭の中で、いつコンテキスト サイズが自動変更されるか覚えていません)。

于 2013-01-09T16:57:01.003 に答える