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倍され、配置されました。 しかしグリッドは拡大されず、上手く描画できているようです。 |
各デバイスの解像度は
iPhone：320×480(HVGA)
Desire：480×800(WVGA)
NexusOne：480×800(WVGA)
なので、1.5倍になるってのはわからなくはないですが、
NexusOneはiPhoneと同じ様に描画されています。
結局、Desire対策として、画像はCSSで配置する事にしました。
HTML5の対応がそれぞれに違う事は、問題無いと思っているのですが、
この程度くらいは、同じフォーマットで作れるようにしてもらわないと、困りますね。
