HTC Desireでのcanvasのバグ?

このエントリーをはてなブックマークに追加

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

Leave a Reply