PlayCanvas - The Web Graphics Creation PlatformWeb Graphics Creation Platform Collaboratively build stunning HTML5 games and visualizations
iOS6でメガピクセル画像をCanvasに描画するとおかしくなってしまう件と、その対処 - snippets from shinichitomita’s journal
iOS6によるアップデート まず最初に、iOS6において、Safari上のWebアプリから簡単にカメラ＆フォトライブラリの写真にアクセスできるようになりました。いままでカメラにアクセスするにはPhoneGapなり何なりでネイティブ化する必要があったので、写真共有サービスなどにはかなり有用なアップデートです。 File API、HTML Media Capture への対応 HTML Media Capture に対応し、Safari から カメラを起動してのファイルアップロードが可能になりました。 type 属性値に file を指定すれば単体ファイルのアップロードが簡単に。 （略） ファイルを選択したあとは何ができるか... action による Multipart post Ajax （XMLHttpRequest 2） を使用したファイル送信（プログレス表示にも対応） File AP
HTML5 CanvasとCSS3のスマホブラウザでの描画性能 - ICS MEDIA
スマートフォンのブラウザでどの程度のグラフィック表現が可能なのか、性能が気になりませんか？ 近年、HTML5を利用できる分野はウェブサイトのみならず、ゲームやSPA（シングルページアプリケーション）など多岐に渡っています。そこで、本記事ではiOSやAndroidの新旧さまざまな端末を使ってパフォーマンスを検証。記事の前半では描画性能を、後半ではJavaScriptの計算性能を測定しています。 描画性能の検証ビデオをご覧ください さまざまな端末を使って、描画検証の様子を録画しました。この80秒の動画では画像のオブジェクトの表示可能な個数を測定しています。ビデオの後半が見どころで、iPhone 5のパフォーマンスが良すぎてビデオを早送りするほどスコアがでるまで時間がかかっています。 さまざまな端末のスコアを測定しました 次の表に、2012年までに発売されたスマートフォンのスコアを掲載しました。
HTML5で複雑なアニメーションを実現する最適な方法とは？ CreateJSを使って容量もパフォーマンスも最適化しよう - ICS MEDIA
HTML5で複雑なアニメーションを実現する最適な方法とは？ CreateJSを使って容量もパフォーマンスも最適化しよう HTML5で複雑なアニメーションを実現する方法にはいつか方法がありますが、それぞれの手法について容量とパフォーマンスのメリット・デメリットを検証してみたいと思います。 スプライトシートを使う方法 ベクターアニメーションを使う方法 スプライトシートビルダーを使う方法 おまけ：GIFアニメーションを使う方法 おまけ：Flashアニメーションを使う方法 スプライトシートを使う スプライトシートとは映画のコマのようにアニメーションの全コマを画像として用意しておいて、順番に高速に切り替えることでアニメーションを実現する方法です。enchant.jsやCreateJSなど多くのJavaScriptのフレームワークで採用されており、もっともスタンダードな方法です。 表現の再現性が高いう
HTML5 Canvasでパーティクル表現！パーティクルエンジンParticleEmitterJS | ClockMaker Blog
にゃあプロジェクトさんに教えてもらったのですが、HTML5用のパーティクルエンジン「ParticleEmitterJS」が面白そうだったので試してみました。次のような表現がビジュアルエディターを使ってHTML5で簡単に作ることができます。 Demo (Require the browser supported HTML5 Canvas) Demo (Require the browser supported HTML5 Canvas) ParticleEmitterJS は CreateJS のフリーの拡張ライブラリで、簡単にパーティクルエフェクトを作ることができます。パーティクルエフェクトはゲームやコンテンツ表現の演出強化や、雲や炎などのシミュレーションにも利用できます。パーティクルは基本的に数値演算を利用するためプログラマの領分という印象が強いですが、ParticleEmitterJS
Android × Canvas の即死ポイントとその回避策 | buccchi.jp
CreateJS を使ったWebアプリをいくつか作ったのですが、iPhone はサクサクでも Android でやたらハマる。 Android 2.3 で最適化したつもりのものが 4.0 の標準ブラウザで落ちたりする。 機種や OS のバージョンにより動作がさまざまなため確認しきれない。 というとこでハマったポイント3つを共有します。 誰かもっとよい解決策を教えてくれるとありがたい。 即死ポイントその1 Android 4.0.4 で Canvas をリサイズするとブラウザが落ちる 回避策 Canvas 領域を広めにとっておき、Canvas ではなく Container 側をリサイズ。 はみでた部分は css でトリミング。 これで落ちなくはなるが全体的にボケる。 2013.7.7 追記 その後、以下の方法を試したところ落ちずに動作すことが確認できました。 描画とかGPUアクセラレーション
Animate your HTML5
Accès rapide: ➛ CSS3 ➛ SVG ➛ Canvas ➛ WebGL ➛ CSS shaders précédentsuivant action action = sur la plupart des slides, il se passe quelque chose quand on clique (surtout les slides 4, 9, 19, 31 et 38 :-) Quick access: --self-- --self-- --self-- --self-- --self-- --self-- --self-- --self-- --self-- --self-- previous next action action = on most slides, something happens when you click (especially sl
HTML＋JavaScriptだけでブラウザに図形描画（3） - Canvas API -
第2回、第3回と続いてきたCanvas API編も、今回が最後。本稿では、キャンバスの設定を保存する方法やキャンバスの内容をデータ化する方法、ユーザーのマウス操作に応じて図形を描画する方法などなどについて紹介します。 TIPS 028：画像が重なった場合の処理方法を指定する TIPS 029：キャンバスの設定を保存＆復元する TIPS 030：画像を拡大／回転／変形して表示する TIPS 031：キャンバス上の図形の一部を切り出す／貼り付ける TIPS 032：マウスポインタの座標に応じて図形を描画する TIPS 033：キャンバス上の図形をData URL形式で保存する サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。 TIPS 028：画像が重なった場合の処理方法を指定する globalCompositeOperationプロパティを利用することで、画
Zoom Zum - Zoom Zum Blog
The need for dependable bail bond services becomes essential when legal emergencies occur. The two main offices of Dante’s Bail Bonds serve southern Louisiana by placing their bail bond locations in Lafayette Parish and East Baton Rouge Parish. The Lafayette Parish office functions as a main resource for the Acadiana region because it provides full bail services to Lafayette residents and the near
HTML5/JavaScriptによるゲーム開発に使えるフレームワーク·Gamvas MOONGIFT
GamvasはHTML5/JavaScriptを使ったゲームフレームワークです。物理エンジンを内包しています。 HTML5/JavaScriptが発展するのにつれてWeb標準で動作するゲームの現実味が増しています。そんな時に必ず必要になるのがゲームエンジンと思われます。今回はHTML5用のゲームエンジン、Gamvasを紹介します。 デモです。上からオブジェクトが落下してきます。 オブジェクトは作用しあって動きます。 こちらは雨が湖畔に落ちていくデモです。 煙のデモ。ランダムに流れていきます。 こちらはクリックするとその部分で爆発が起きるデモ。 空間に三角形のオブジェクトが浮かんでいます。左右の矢印キーで視点が変えられます。 移動はスムーズです。 Gamvasはオブジェクトごとのステータスサポート、アニメーション処理、Box2Dベースの物理エンジンをサポートしています。カメラシステムとして視
Canvasをより手軽に使いやすくするフレームワーク·KineticJS MOONGIFT
KineticJSはCanvasタグを使ったベクターグラフィックをより簡単に使えるようにするJavaScriptライブラリです。 HTML5の登場によって、Web上でも高度な表現が可能になっています。とはいえそのためにすごい量のコーディングをしなければならないイメージがあります。しかしKineticJSを使えば分かりやすいコードで、ゲームやドローを伴ったグラフィックスが描けそうです。 サンプル。ボタンを押すとオブジェクトが動く。 こちらは星をドラッグアンドドロップできる。 世界地図のベクター画像。 ビルのマップ。マウスに反応して格好いい。 動物の絵と影をマッチさせるゲーム。 ここからは実際に利用されている例。ロボットアバターを作成する。 こんな感じに自由に選べる。 かつてはFlashでやっていたようなグラフィックがJavaScriptで実現する。 ひげを載せる遊び。これもKineticJS
JavaScriptで画像加工アプリを作ろうぜ！
今回、紹介するライブラリはこちらの「Pixastic」というJavaScriptライブラリです！ Pixasticライブラリを利用すると、画像にエフェクトなどの効果を掛けられます。HTML5のAPIと連携することで、アプリケーションのような動作も可能になります。 過去に「HTML5」関連の勉強会で発表した際、このPixasticライブラリを使ったベータ版サンプルアプリを披露しました。筆者としては非常に優れたライブラリであると思いますので、再度記事にて紹介します。 Pixasticとは？ 画像に手を加えることができる、オープンソースのJavaScriptライブラリです。GitHubにもアップロードされていますが、以下のURLが「Pixastic」のサイトです。 ブラウザ上で作業できる これまでの画像加工ソフトは、特定の画像変更・加工アプリをPCにインストールし活用してきました。「Pixast
Chrome Experiments
Chrome Experiments is a showcase of work by coders who are pushing the boundaries of web technology, creating beautiful, unique web experiences. You'll find helpful links throughout the site for creating your own experiments, and you can also explore resources like WebGL Globe and our workshop of tools.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://visitmix.com/labs/ai2canvas/index.html
日本全国花粉飛散マップ Pollen Map in Japan - ICS
http://matsu4512.jp/blog/2012/11/07/fire/
Paper.js