CreateJS でハロウィン的なアニメーションつくってみた

CreateJS でハロウィン的なムービーつくってみた CreateJS でハロウィン的なムービーつくってみたアニメーション感想関連アニメーションデ○モンが11月から劇場版？をやるとかでそれ関係のネタです。 github pages: haloween2015

2015-10-30

EaselJS のSpriteSheet, Sprite を使ってスプライトアニメーション [CreateJS]

Canvas CreateJS HTML JavaScript アニメーション

EaselJS のSpriteSheet, Sprite を使ってスプライトアニメーション [CreateJS] png, jpg, svg などでスプライトシートを作っておけば、 SpriteSheetクラスとSpriteクラスでスプライトアニメーションを生成できる。 EaselJS のSpriteSheet, Sprite を使って…

2015-10-29

EaselJS のプロパティやMatrix2D を使ってオブジェクトの変形 [CreateJS]

Canvas CreateJS HTML JavaScript

EaselJS のプロパティやMatrix2D を使ってオブジェクトの変形 [CreateJS] EaselJS 0.8.0 から仕様が変わっているようなのでメモ。以下の記事が日本語で参考になります。 FN0811001 - 変換行列を数学的に捉える - Flash : テクニカルノート FN1308001 | Ease…

2015-10-29

EaselJS の基準点(regX, regY) とtranslate をみてみる [CreateJS]

Canvas CreateJS HTML JavaScript

EaselJS の基準点(regX, regY) とtranslate をみてみる [CreateJS] Display Object の基準点(regX, regY) を変えている場合、とMatrix2D.translate がその分ズレるようなのでメモ。 EaselJS の基準点(regX, regY) とtranslate をみてみる [CreateJS] Create…

2015-10-28

CreateJS でSVG画像を扱う

Canvas CreateJS HTML JavaScript SVG

CreateJS でSVG画像を扱う CreateJS でSVG を扱うときのメモ。 CreateJS でSVG画像を扱う CreateJSのバージョン CreateJSでSVGを描画 PreloadJSでSVGの読み込み読み込み成功時のコールバック Bitmapインスタンスにして描画 Bimapインスタンスの生成 URI か…

2015-10-28

SVGのpreserveAspectRaitoとCanvasのdrawImage

Canvas Chrome CreateJS HTML JavaScript SVG

SVGのpreserveAspectRaitoとCanvasのdrawImage SVGの preserveAspectRatio とブラウザによってCanvas のdrawImage の仕様が違ったのでメモ。 SVGのpreserveAspectRaitoとCanvasのdrawImage ブラウザ環境 SVG のpreserveAspectRatio preserveAspectRatioプロ…

2015-10-21

SVG画像を canvgでCanvas に変換してみる

Canvas SVG

SVG画像を canvgでCanvas に変換してみる SVG画像を canvgでCanvas で扱えるように変換してみたのでメモ。 SVG画像を canvgでCanvas に変換してみる canvg とは類似ツール Drawscript Toolkit for CreateJS ink2canvas サンプル参考リンク canvg とは SVG…

2015-10-19

CreateJS で読み込んだ画像をアニメーションさせる

Canvas CreateJS JavaScript アニメーション

CreateJS で読み込んだ画像をアニメーションさせる CreateJS で読み込んだ画像をアニメーションさせてみたのでメモ、以下の記事を再現できるか試してみました。 gihyo.jp CreateJS で読み込んだ画像をアニメーションさせるサンプルメモ画像を読み込む画…

2015-10-18

Canvas のライブラリCreateJS を試してみる

Canvas CreateJS JavaScript アニメーション

Canvas のライブラリCreateJS を試してみる Canvas を使いやすくするライブラリCreateJS を試してみたのでメモ。公式サイト： www.createjs.com Canvas のライブラリCreateJS を試してみる CreateJS とは EaselJS チュートリアル PreloadJS チュートリアル …

2015-08-02

Canvas でフラクタル（コッホ曲線、フラクタルツリー）を描く

Canvas JavaScript

Canvas でフラクタル（コッホ曲線、フラクタルツリー）を描く Canvas で、フラクタルであるコッホ曲線、フラクタルツリーを描いたのでメモ。 Canvas でフラクタル（コッホ曲線、フラクタルツリー）を描くコッホ曲線サンプルコードフラクタルツリーサン…

2015-08-01

Canvas で自由落下運動、水平投射運動、斜方投射運動アニメーション

Canvas JavaScript

Canvas で自由落下運動、水平投射運動、斜方投射運動アニメーション Canvas で、自由落下運動、水平投射運動、斜方投射運動アニメーションを作ったのでメモ。 Canvas で自由落下運動、水平投射運動、斜方投射運動アニメーションサンプル共通の関数自由落…

2015-07-31

Canvas で東京電力の電力使用状況を可視化してみた

Canvas HTML Webサイト JavaScript jQuery

Canvas で東京電力の電力使用状況を可視化してみた Canvas の棒グラフ、円グラフの描画＋東京電力の電力使用状況API を組み合わせて、可視化してみたのでメモ。なお、他の電力会社の電力使用状況データを取得できないか調べてみたところ、 yahoo の電力使…

2015-07-28

Canvasで棒グラフ、折れ線グラフ、円グラフをつくる

Canvas JavaScript

Canvasで棒グラフ、折れ線グラフ、円グラフをつくる D3.js を使う前の練習ということで、Canvas で棒グラフ、折れ線グラフ、円グラフを作ってみたのでメモ。なお、目盛りはついてないです。。 Canvasで棒グラフ、折れ線グラフ、円グラフをつくる棒グラフ …

2015-06-29

JavaScirpt でマウス座標（位置）を取得する

Canvas JavaScript

JavaScirpt でマウス座標（位置）を取得する JavaScirpt でマウス座標（位置）を取得方法をメモ。取得する方法は2 種類あるようです。 (clientX, clientY) と (pageX, pageY) の違いと、 (getBoundingClientRect().left[top], getBoundingClientRect().top) …