HTML5 CanvasとCSS3のスマホブラウザでの描画性能 - ICS MEDIA
スマートフォンのブラウザでどの程度のグラフィック表現が可能なのか、性能が気になりませんか？ 近年、HTML5を利用できる分野はウェブサイトのみならず、ゲームやSPA（シングルページアプリケーション）など多岐に渡っています。そこで、本記事ではiOSやAndroidの新旧さまざまな端末を使ってパフォーマンスを検証。記事の前半では描画性能を、後半ではJavaScriptの計算性能を測定しています。 描画性能の検証ビデオをご覧ください さまざまな端末を使って、描画検証の様子を録画しました。この80秒の動画では画像のオブジェクトの表示可能な個数を測定しています。ビデオの後半が見どころで、iPhone 5のパフォーマンスが良すぎてビデオを早送りするほどスコアがでるまで時間がかかっています。 さまざまな端末のスコアを測定しました 次の表に、2012年までに発売されたスマートフォンのスコアを掲載しました。
web.dev
Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.
高度なゲームも作れる。HTML5/Canvasフレームワーク·CasualJS MOONGIFT
CasualJSはCanvasタグを使ったアニメーション/ゲーム作成用JavaScriptフレームワーク。 CasualJSはJavaScript/HTML5製のオープンソース・ソフトウェア。JavaScriptはHTML5の登場によって大きく花開こうとしている。位置情報の利用、ストレージ、WebSocket（今は切り離されているが）、Canvasタグ等様々な新技術が盛り込まれている。 ボタン Canvasタグを使うことで、アニメーションを行ったりグラフィックを描くことができる。それもJavaScriptからインタラクティブに扱えるものだ。だが全てを作り込むのは大変だ。そこで使ってみたいのがCasualJSというJavaScriptフレームワークだ。 CasualJSはHTML5のCanvasを利用するためのフレームワークだ。ActionScript3ライクという説明がついている通り、アニ
Spriteを使ったJavaScript製のアニメーションライブラリ·Sprite.js MOONGIFT
Sprite.jsはJavaScript製のオープンソース・ソフトウェア。JavaScriptを使ってゲームを作る場合、キャラクターの描画には二種類の方法が考えられるだろう。一つは画像を使う方法、もう一つはドット単位やCanvasを使って直接描画する方法だ。 32体の人形が歩き回るデモ 後者はあまりに面倒だ。だから大抵画像を使った方法を選択するはずだ。そんな時、歩いたりジャンプしたりするアクションごとに画像が分かれていると、予め読み込んでおくデータ数が増えてしまう。それを解決するのがSprite.jsだ。 Sprite.jsがユニークなのは、一枚の画像を使って一つのキャラクターを表現する所にある。つまりGoogleなどがよく使っている小さなアイコン画像を固めて一つの画像ファイルにし、CSSを使って表示場所を切り替えて描画するSpriteをアニメーションに使っているのだ。 キー入力で動くデモ
Canvasを活用するJavaScriptライブラリ·LibCanvas MOONGIFT
LibCanvasはJavaScript製のオープンソース・ソフトウェア。JavaScriptは速度、機能ともに進化している。メールやカレンダーのようなオンラインとの親和性の高いものはもちろん、画像編集をはじめ様々なアプリケーションがWeb化している。 ソリティアデモ 今後スマートフォンなどでHTML5が積極的に取り入れられてくれば、JavaScriptの利用機会はさらに増えるはずだ。そんな時には一からJavaScriptを組むのではなく、多様なライブラリを使うことになるだろう。そこで覚えておきたいのがLibCanvasだ。 LibCanvasはCanvasタグを使うことで表現力を向上するJavaScriptライブラリだ。MooToolsをベースに開発されている。デモの中には物理エンジンのように多数のオブジェクトが関連して動作するものや、カードゲームのデモもある。 アステロイドのデモ ソリ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Fabric.js Javascript Canvas Library
Paper.js
Billy’s Homepage