はしくれエンジニアもどきのメモ

情報系技術・哲学・デザインなどの勉強メモ・備忘録です。

Canvas

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

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

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

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

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

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

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

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

CreateJS でSVG画像を扱う

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

SVGのpreserveAspectRaitoとCanvasのdrawImage

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

JavaScirpt でマウス座標(位置)を取得する

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

Canvas に図形を描画し、矢印キーで移動させる

Canvas に図形を描画し、矢印キーで移動させる 矢印キーを入力したら、clearRect(x, y, w, h) で描画をクリアし、移動した分を描画するというものです。 今回は、キーを入力したら再描画ですが、無限ループやsetInterval(setTimeout) で繰り返し描画するよう…

FileAPI で画像を読み取り、Canvas 上に画像を描画

FileAPI で画像を読み取り、Canvas 上に画像を描画 FileAPI で画像を選択またはドラッグ&ドロップで画像を表示 - はしくれエンジニアもどきのメモ の時は、<img> タグで画像を表示させてましたが、今回は、FileAPI で読み取った画像をCanvas 上に表示させてみます…

Canvas 基礎(線・図形・テキスト)

Canvas 基礎(線・図形・テキスト) Canvas を触ってみたのでメモ。 Canvas 基礎(線・図形・テキスト) 線・図形 ブラウザがCanvas に対応してるかチェック 四角形(塗りつぶしなし) 四角形(塗りつぶしあり) 一部clear する四角形 線の太さ(幅)を変え…