HTC Desireでのcanvasのバグ？

Posted on 2010 年 6 月 18 日, 1:55 PM, by 岡田昇三, under HTML5, tips.

CS5発売セミナーで、HTML5版の「へぇボタン」を作りました。


canvasで円を書いて、中央にへぇという画像を配置するという簡単なものです。


連動プレゼン用のウェブアプリなので、canvasとJavaScriptでFlashっぽいぐにゃぐにゃした動きをつけらればいいかな、と思って作っていたのですが、HTC Desireでは画像がうまく配置できませんでした。


iPhoneと、NexusOneは中央に配置されるのですが、Desireは中央に表示されません。




どうもcanvasのdrawImageがうまく動いていない印象でしたので、実験してみました。

■実験
40pixのグリッドをcanvasで書き、黄色のビットマップ(80×80)を座標(120 , 160)に配置しました。


HTML側

1

<canvas id="c1" width="320" height="480"></canvas>



JavaScript側

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

 
var canvas = document.getElementById('c1');
var ctx = canvas.getContext('2d');
 
ctx.clearRect(0,0,320,480);//消す
ctx.save();//状態を保存
 
 
//線を描くと宣言。
ctx.beginPath();
 
//40x40のグリッドを設定
for(i=0;i<=12;i++){
	ctx.moveTo(40*i, 0);
	ctx.lineTo(40*i, 480);
	ctx.closePath();
	ctx.moveTo(0, 40*i);
	ctx.lineTo(320, 40*i);
	ctx.closePath();
}
 
//グリッドを描画
ctx.stroke();
 
 // Imageオブジェクトを生成
var img = new Image();
 
//80x80の画像のパス。
img.src = "img/bitmap80x80.gif?" + new Date().getTime();
 
//画像が読み込み完了したら、X：120、Y：160に配置
img.onload = function() {
	ctx.drawImage(img, 120, 160);
}




■結果
以下が、各デバイスでのスクリーンショットになります。

■iPhone
画像の位置、サイズともに正しく表示される。
■NexusOne
NexusOneも画像の位置、サイズともに正しく表示される。
 ■HTC Desire
Desireだけズレる。
位置も大きさも指定した数値の1.5倍され、配置されました。
しかしグリッドは拡大されず、上手く描画できているようです。

各デバイスの解像度は

iPhone3GS：320×480(HVGA)
Desire：480×800(WVGA)
NexusOne：480×800(WVGA)


なので、1.5倍になるってのはわからなくはないですが、
NexusOneはiPhoneと同じ様に描画されています。

結局、Desire対策として、画像はCSSで配置する事にしました。


HTML5の対応がそれぞれに違う事は、問題無いと思っているのですが、
この程度くらいは、同じフォーマットで作れるようにしてもらわないと、困りますね。

コメント (RSS)  |  トラックバック

Leave a Reply

«
»