こんにちは、@yoheiMuneです。 CreateJSというHTML5 Cavasで描画/アニメーションを行うライブラリの解説。 今日は第３弾としてFilterクラスを使いこなして、一つの画像で色々な描画を行う方法を記載したいと思います。 CreateJSとは CreateJSとは、HTML5 Canvasを使った描画/アニメーションの実装を強力にサポートしてくれるライブラリです。 このブログでは、筆者がCreateJSを実際に使って学んだ事を中心に、いくつか記事を書いております。 - Canvasアニメーションを実装する時に便利で良く利用しているJSライブラリ、CreateJS - Bitmapクラスを使って画像の描画を自由自在に - 色々なFilterを適用して描画する内容を変化させる（今日はここ） Filterクラスを使って、描画内容を変化させる CreateJS内のEaselJS
![[CreateJS] 色々なFilterを適用して描画する内容を変化させる - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/dff3a53b23f201e6a40924aa3dff29d1d860259d/height=288;version=1;width=512/https%3A%2F%2Ffanyv88.com%3A443%2Fhttps%2Fwww.yoheim.net%2Fimage%2F176.jpg)
インタラクティブコンテンツ制作に役立つHTML5向けのフレームワークCreateJS (使い方は入門サイトを参照ください)。2014年1月に公式ブログでWebGLサポートが発表されました（参照記事「WebGL Support in EaselJS」)。公式ブログによるとパフォーマンスが従来比の6〜50倍にも達するとのことです。 果たしてどのぐらいの性能があるのか気になりましたので、以前の検証記事「HTML5開発者必見、最速のJavaScriptライブラリはどれだ!? パフォーマンスの徹底検証」を元に、WebGL対応版のCreateJS(描画を扱うJSライブラリ「EaselJS」)のパフォーマンスを比較検証してみました。検証に用いたデモは次のリンクをクリックすることで再生できます。 CreateJS (EaselJS 0.7.1) : 従来版。CanvasのContext2Dが利用されている
2015年2月10日（火）、アドビシステムズ株式会社でCreateJS勉強会 (第5回)が開催され30名を超える方々が来場されました。勉強会のフォローアップとして、発表資料「CreateJSで制作するスペシャルコンテンツ」のスライドをブログ記事という形で公開します。本記事では口頭で発表した内容もできる限り記載しました。 なお、前編（CanvasとWebGLの比較）と後編(WebGLの最適化)の二部構成にしています。前編となる本記事ではスペシャルコンテンツ制作にあたり調査したHTML CanvasとWebGLの双方の利点・欠点をまとめています。 HTML CanvasとWebGL 今回のテーマは「HTML CanvasとWebGLの使い分け」です。皆さんもご存知の通り、HTML5のCanvas要素 (JavaScript ではCanvasRenderingContext2Dオブジェクト）は従
CreateJSは、HTML5でリッチコンテンツを制作するためのJavaScriptライブラリのスイート（特定用途のソフトウェアを詰め合わせたパッケージ）です。Flashデベロッパーとして著名なGrant Skinner氏（gskinner.com）が開発を行っており、MITライセンスのオープンソースソフトウェアとして商用でも無償で利用できます。 急激に拡大している利用 2013年5月4日～8日に開催されたAdobe MAX 2013における、Grant Skinner氏のセッション「CreateJS: Building Rich Interactive Experiences in HTML5」によると、CDNにホスティングされているCreateJSライブラリのヒット数が急激に増加しており、現在では2億ヒット（月間）を超えています。 その中でも、日本からの利用は世界で第2位を記録しており
このサイトはHTML5 Canvasのフレームワーク「CreateJS」の入門サイトです。初学者から学べるように基本的なCreateJSの使い方から解説しつつ、発展的な内容までまとめています。このサイトを通して、webでのインタラクションデザインについて学んでいきましょう。 導入編 webのリッチコンテンツを作るためのフレームワーク「CreateJS」。どのような場面で利用されるのか、どういった表現が可能なのかという点を中心に、概要と導入方法を説明します。 CreateJS とは CraeteJS の事例 簡単なサンプルを試そう ブラウザの開発ツールの使い方を抑えよう CDNのURL 次のコードをHTMLファイルに記述することでCreateJSが利用可能になります。 <script src="https://code.createjs.com/1.0.0/createjs.min.js">
こんにちは、池田です。1年半ぶりの更新となります。ご存知の方も多いと思いますが、私の記事執筆の活動はClockMaker BlogからICS MEDIAに舞台を移動していまして、ICS MEDIAで積極的に発信しています。ぜひあちらのサイトをチェックくださいませ。 さて、この度「CreateJS入門サイト」を立ち上げました。 CreateJS入門サイト – ICS MEDIA このサイトの公開に伴い、編集後記を全2回で公開します。 CreateJS入門サイトを作った理由 CreateJSはFlashのようなコンテンツを作ることのできる便利なフレームワークです。Flash経験者であれば少ない学習コストではじめることができ、2012年の登場以来(参照記事「リッチなHTML5コンテンツのためのフレームワーク『CreateJS』が公式サイトを公開」)、多くの元Flashクリエイターに利用されていま
上記画像のような演出デモを作ってみたので解説します。( デモ ) ネ申の砂場あそび 先日、CreateJS の生み親である Grant Skinner ネ申が申されました。 Started posting a few little demos & experiments to the CreateJS sandbox github.com/CreateJS/sandb… More to come. — Grant Skinner (@gskinner) April 15, 2013 「 CreateJS/sandbox に小さい実験デモを公開していくよ。 ( 意訳 ) 」…とのことなので、現在公開されている Kaleidoscope.js を弄ってみました。 Kaleidoscope.js の Haxe 用 extern クラス Haxe/CreateJS な人は下記コードをご自由にどうぞ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
