[B! HTML5][Canvas] flatbirdのブックマーク

HTML5 Canvas Cheat Sheet

http://blog.nihilogic.dk/ Canvas element Attributes Name Type width ulong height ulong Methods Return Name string toDataURL( [Optional] string type, [Variadic] any args) Object getContext( string contextId) 2D Context Attributes Name Type canvas HTMLCanvasObject [readonly] Methods Return Name void save( ) void restore( ) Transf ormation Methods Return Name void scale( float x, float y) void rotate

flatbird 2014/07/14

リンク

Famo.us·WebGL/Canvasを使って高度な表現を可能にするJavaScriptフレームワーク MOONGIFT

スマートフォンにおいてWebかネイティブかと言った議論は常にされています。ネイティブアプリは高度なUI/UXを提供する一方、インストールの手間が否めません。Webは速度やUXにおいて見劣りがします。しかしWeb（HTML5）の進化は止まりません。ついにここまで！というフレームワークがFamo.usです。3Dを備えたレンダーを行うJavaScriptフレームワークになります。 Famo.usの使い方たくさんのデモが登録されていますので見ていきましょう。写真と画像の組み合わせ。左右から表示されるアニメーションもあります。スクロールパララックスエフェクトのデモ。アニメーションのデモ。カレンダーの日付を選択するとスケジュールが開きます。アニメーションがスムーズです。スライドして表示される写真のデモです。ページ送りのデモ。天気アプリデモ。ベクター調の表示がいいですね。タスク管理。

flatbird 2014/06/20

リンク

SCRAPBLOG : canvas要素によるWebページのスクリーンショット保存機能

今年4月に行なわれたMozillaParty7.0において、いくつか有用な情報を得ることができたが、中でもcanvas 要素の toDataURL メソッドで取得した data:URL をファイルへ保存するという Taken さんの情報は、 ScrapBook で保存したWebページのコレクションをサムネイル画像によって一望するというプランを一気に実現へと近づけることができるありがたいものであった。その具体的な方法はTaken SPC : Mozilla Party JP 7.0 に行ってきましたのポストでも説明されているが、これを利用して現在ブラウザに表示されているWebページのスクリーンショット（今回はサムネイルではなく、原寸大のスクリーンショット）をPNG画像として保存する機能を実装してみる。 (1) XUL html:canvas要素を chrome://browser/conte

flatbird 2013/11/17

Canvas
html5

リンク

超カンタン！HTML5 で GIF アニメを作る方法

Posted: August 2, 2013 / Last updated: August 2, 2013 知っている人は知っている方法だと思いますが、実際にやってみたのでメモ。 ※ デモの画像はこちらからお借りしました。特にライセンスが記述されていなかったのですが、問題があれば差し替えます。ライブラリは jsgif というのを使わせて頂きました。手順はライブラリを読み込み、画像をひとコマ分ずつ canvas にロード、ライブラリに追加。終わったらバイナリから gif ファイルを生成、という感じ。もう少し詳しい解説は以下。 LZWEncoder.js NeuQuant.js GIFEncoder.js を読み込む適切なサイズの canvas を用意 GIFEncoder からエンコーダを作るvar encoder = new GIFEncoder(); アニメーションの時間間隔など

flatbird 2013/08/02

html5
Canvas

リンク

HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う記事一覧 | gihyo.jp

flatbird 2013/04/17

リンク

HTML5デモ「日本全国花粉飛散マップ」を作って分かったCreateJSとTypeScriptでの効率的な開発手法 - ICS MEDIA

HTML5デモ「日本全国花粉飛散マップ」を作って分かったCreateJSとTypeScriptでの効率的な開発手法 2013年3月15日に開催されたCreateJS勉強会（第2回）で発表したWebサイト「日本全国花粉飛散マップ」ですが、CreateJSとTypeScriptを使って制作しました。今回の作品のポイントとしては、次の3点があげられます。本記事では次を具体的に説明します。 HTML5で制作、デスクトップだけでなくスマートフォンやタブレットでも再生可能 CreateJSで、DOMではできないHTML5 Canvasならではの表現 TypeScriptを用いて低学習コストで効率的な制作の実現スマートフォンやタブレットでも閲覧可能このWebサイトは環境省が提供している資料を元に、過去9年分の花粉の飛散量をパーティクルを用いてビジュアライズしたものです。花粉の量に比例して、パーティ