タグ

CreateJSに関するfaibouのブックマーク (5)

  • CreateJSとCanvas APIの比較

    対象デバイスをPCに限定してFlashを活用したキャンペーンサイトなど特定の状況を除いて、スマートフォン/タブレット対応が求められる場合(大半がそうですが)、HTML5/JSでリッチなコンテンツを作成する機会が増えています。 Canvas APIではアニメーションを行うメソッドが提供されておらず、Canvas要素内でアニメーションを実現しようと思うと工数が増えてしまいがちです。 そこで、今後工数短縮の選択肢の一つとして検討出来るよう、CreateJS(EaselJSとTweenJS)とCanvas APIで同様の事を実現した際の違いを簡単に比較します。 CreateJSとは HTML5のCanvas要素を使ってリッチなコンテンツを簡単に作成できるJavaScriptライブラリです。 次の4つのライブラリで構成されています。 EaselJS Canvas要素を効率的に扱うためのライブラリ。

  • CreateJSで遊んでみる 1日目 EaselJS - WebDelog

    2015.06.16 記事の内容を全面的に書き直しました。 目次 CreateJS とは何者なのか? EaselJS をはじめるための準備 EaselJS を使うメリット Canvas にはオブジェクトを管理する機能はない Canvas はウォールペイントのようなもの? ベクター図形の描画がよりわかりやすく便利に 豊富なフィルター機能 実際に触ってみる CreateJS を使うための準備 Stage を配置する EaselJS DisplayObjects Shepeクラスと Graphicsクラスでベクターシェイプを描く Bitmapクラス で画像を読み込む Tickerクラスを使ってアニメーションを実装する MouseEvent でクリックでアクションを起こす 終わりに CreateJS とは何者なのか? CreateJSはHTML5の技術を利用した インタラクティブなコンテンツを作成

  • create.js の使い方 - Qiita

    <html lang="ja"> <head> <meta charset="UTF-8"> <title>canvas</title> </head> <body> <canvas id="my-canvas" width="640" height="480"></canvas> <script src="https://code.createjs.com/easeljs-0.8.2.min.js"></script> <script> window.onload = function() { // 使用するcanvasを取得 var canvas = document.getElementById("my-canvas"); // ステージを関連付ける var stage = new createjs.Stage( canvas ); // 赤い丸を描画 var circle = ne

    create.js の使い方 - Qiita
  • UNTITLED

  • WebGLに対応し高速化したCreateJSの描画性能を探る - ICS MEDIA

    インタラクティブコンテンツ制作に役立つHTML5向けのフレームワークCreateJS (使い方は入門サイトを参照ください)。2014年1月に公式ブログでWebGLサポートが発表されました(参照記事「WebGL Support in EaselJS」)。公式ブログによるとパフォーマンスが従来比の6〜50倍にも達するとのことです。 果たしてどのぐらいの性能があるのか気になりましたので、以前の検証記事「HTML5開発者必見、最速のJavaScriptライブラリはどれだ!? パフォーマンスの徹底検証」を元に、WebGL対応版のCreateJS(描画を扱うJSライブラリ「EaselJS」)のパフォーマンスを比較検証してみました。検証に用いたデモは次のリンクをクリックすることで再生できます。 CreateJS (EaselJS 0.7.1) : 従来版。CanvasのContext2Dが利用されている

    WebGLに対応し高速化したCreateJSの描画性能を探る - ICS MEDIA
  • 1