Archive for the ‘html5’ Category

 

html5 canvas ImageData, Uint8ClampedArray。簡易アニメーション

11月 15th, 2012

ImageData {height: 100, width: 100, data: Uint8ClampedArray[40000]} data: Uint8ClampedArray[40000] [0 … 9999] [10000 … 19999] [20000 … 29999] [30000 … 39999] buffer: ArrayBuffer byteLength: 40000 byteOffset: 0 length: 40000 __proto__: Uint8ClampedArray height: 100 width: 100 __proto__: ImageData でこの配列40000は、rbgaの4データがずっと並んでる100×100なので4*100*100です。 というメモです。 何をしたいかというと ・canvasの一部だけ上書きすることで、負荷の少ないアニメーションにする。 ・移動と回転 ・残像を残す ・複数パーツ重ねて同時に変化 ・ぱらぱらアニメ(複数画像)+移動 まずは、適当に点を動かして出来そうな雰囲気が出てきたら ブロック崩しみたいなのを作ろうかと 先の話ですが ・ブロックデータ自体が、この配列になる。崩されると(当たった点からの距離で)透過され0になる。 検証:au IS03 100×100のオブジェクトを2つ、10fpsで描画し続けても問題ありませんでした。2万pixel更新(若干遅れますが) 4×4を2つ、10fpsで移動させてみます。putImageの描画前データを保管して、更新を繰り返します。32pixel x 2 […]

Read full article | コメントは受け付けていません。

canvas パフォーマンス改善 html5 | 対応ブラウザのチェックが重要

10月 11th, 2012

http://www.html5rocks.com/ja/tutorials/canvas/performance/ キャンバスで描画&アニメーションを作る前に一度確認しておいた方が良いページのようです。 一度自分で作ってみてから比較してもいいです。 ただし、android向けなどを作成する際には http://caniuse.com/requestanimationframe などは、利用出来ないので注意が必要です! 対応ブラウザのチェックは重要ですね・・・

Read full article | コメントは受け付けていません。

html5 svg , canvas

10月 5th, 2012

んー最新だったらsvgも良いかな http://caniuse.com/svg-html5 http://caniuse.com/canvas これをみると10/1時点で 50%以上が2.3.x http://developer.android.com/about/dashboards/index.html と考えるとcanvasしかないな

Read full article | コメントは受け付けていません。

iPad 用 m.youtube.comを見る。| chrome extension

9月 20th, 2012

iPad用で見るとhtml5でmp4を見ることが出来ます。 flashだとパソコンが熱くなってくるので・・・ でiPad用を見てみました。 ↓ユーザーエージェントを変更できるchrome extension useragent changer | chrome extensionのインストールはこちらから ユーザーエージェントをiPadにして youtube.comを開くと以下のように iPad用が表示されます。 こんな感じで。 html5でvideoやりたいときにはとても参考になりますね!

Read full article | コメントは受け付けていません。

データベースサイズを知りたい。。。web sql database | chrome extension html5

4月 10th, 2012

chrome extension の databaseですが openDatabaseに指定するサイズは、制限値ではなくて、初期値?的なもののようで、超えてもエラーも何も出ません・・・ 基本 html5では、5MBを超えるとメッセージが出て、okしたら自動拡張されるようです。 http://html5doctor.com/introducing-web-sql-databases/ とりあえず、今のところサイズを知ることは、出来ないようなので、データを入れるときにデータ容量だけ計算して保存しておこうかと思います。 サイズ取得に成功した方がいましたら教えてください。

Read full article | コメントは受け付けていません。

jquery mobileでサイトを作成してみた。

2月 2nd, 2012

こんな感じです。 スマートフォンやタブレットでこちらのサイト→ http://aucru.com をご確認ください。 http://jquerymobile.com/ iOS Android Windows Phone BlackBerryに対応したサイトが簡単に作成できます。 これからいろいろなサイトに利用していきたいと思います。

Read full article | コメントは受け付けていません。

submitの置き換えとval()で値を取る方法 | jquerymobile

1月 31st, 2012

同じ問題でreadyを使っているものが多かったのですが、 http://jquerymobile.com/test/docs/api/events.html Important: Use pageInit(), not $(document).ready() ということでこう書きました。 $( ‘#page_main’ ).live( ‘pageinit’,function(event){ $(‘#search_form’).unbind(‘submit’).bind(‘submit’, function(){search();}); }); #page_mainは、data-role=pageのIDです。 submitをunbindしていますが、追加だけで良い場合は、要りません。 ここでsearch()を読んでいるのですが、ここでbindした場合、 search()関数内の$(“#input_id”).val(); は有効になります。 他でsearch();を読んでもval()で取得することは出来ませんでした。 http://jquerymobile.com のサンプルを見ているとhtml5の勉強にもなって面白いですね。 === ajaxで取得するとid指定した物が2つになる・・・同じelementが増えていく? === ajaxでの遷移を停止する。 * formタグに data-ajax=”false” * aタグに rel=”externals” * jquery と jquerymobileの間に設定コードを書く。 <script src=”http://code.jquery.com/jquery-1.6.4.min.js”></script> <script type=”text/javascript”> $(document).live(“mobileinit”, function() { $.mobile.ajaxEnabled = false; $.mobile.ajaxLinksEnabled = false; $.mobile.ajaxFormsEnabled = false; }); </script> […]

Read full article | コメントは受け付けていません。

article section | html5

8月 8th, 2011

articleは記事で、sectionが段落みたいな h1-h6はsection毎に使えるのかな <article> <section> <h1> section 1 </h1> </section> <section> <h1> section 2 </h1> </section> </article>

Read full article | コメントは受け付けていません。