HTML5 シングルページパズル

HTML5でパズルゲームを作った。 クロマル パズル PCの場合はカーソルキーで操作できる。スマートフォンでも十字キーで動くようになっている。 裏側の話を少しすると、、、 内部ロジックはTypeScriptで実装しており、メインとなるViewはcanvasだ。 TypeScriptの練習のために、学生の頃Javaで書いたものを移植したのが原型JavaScript初心者だった頃に作ったので、けっこう汚い。とりあえず公開できる状態にした。 うーん、、やっぱりタッチスクリーンで十字キーは使いにくいなぁ。 »

HTML5 Canvas drawImage vs putImageData

HTML5 Canvas で、drawImage と putImageData のどちらがパフォーマンスが良いか気になって調べてみた。 理由としては、imgタグからcanvasに転写するよりも、ImageData(配列で表現される画像ピクセルデータ)や別canvasを経由した方が実は早いのでは?と疑問に思ったからだ。 自分でベンチマークするまでも無く、先人がすでにjsperfで調査しているようだ。 http://jsperf.com/canvas-drawimage-vs-putimagedata/3 筆者のPCだと、drawImage(img) つまりimgタグからの転写が最速だった。 次いでputImageDataが早い。 ついでに、 »

iOSのcanvasがめっちゃ重い!

iOSのsafariでcanvasの操作がめっちゃ重い!解決策。 具体的には、このような症状。 iOS6系 もともと、position:absolute; 指定している。left と top を、setInterval()にて細かく設定。(動いているように見せる) けっこう巨大なcanvasです 測定してみると、CSS への設定は一瞬で終わっておりボトルネックでは無いように見えるが、画面がカクカクする。 iPhone5 では全く問題無いが、iPad mini だけ激重・ »