[JavaScript] 3次ベジェ曲線をCanvasに引いてみたい | CreateJS, EaselJS « きんくまデザイン
こんにちは。きんくまです。 今回は3次ベジェ曲線をCanvasに引いてみたいです。 ベジェ曲線っていうのは、そうですIllustratorなんかでパスを操作するときのやつですね。 こんな感じの 実は以前ActionScript3でも書いたことがあるんですが、今回はJavaScriptで書いてみたかったので。 >> [AS3] Illustratorのような3次ベジェ曲線を書く（5年も前の記事ですよ！びっくり） 実際にできたもの イメージはこんな感じ（下の画像は動きません） 動かせるやつは、これです 赤丸が始点と終点。緑がコントロール（アンカー）ポイントです。 どうやってやるのかというと公式があります。 >> Cubic Bézier curves これだとよくわかんない！ってことで、もっとわかりやすく解説されているサイトがありました。どうもです。 Hakuhin先生ですね！AS1か2で書か
![[JavaScript] 3次ベジェ曲線をCanvasに引いてみたい | CreateJS, EaselJS « きんくまデザイン](https://cdn-ak-scissors.b.st-hatena.com/image/square/dfa3048d2db6ab8c57c861c83ab8437e1f560831/height=288;version=1;width=512/http%3A%2F%2Fwww.kuma-de.com%2Fwp%2Fwp-content%2Fuploads%2F2015%2F12%2Fbezier_snapshot.png)
TweenJSでアニメーションしてみる2（EaselJSも使ってみる） | 株式会社エイチ・オー・エス
こんにちは。受託開発担当のMasaです。 前回 TweenJSの記事の続きで、今回はテキストのアニメーションを紹介します。 前回の予告では TweenJS を拡張した JSTween プロジェクトの TextTween を紹介すると書きましたが、コンストラクタを呼び出すだけで終わってしまうため、EaselJS + TweenJS でのテキストアニメーションを紹介することにしました。 有名なフレームワークなので説明は省略します。尚、現在の最新バージョンは v7.0 なのでこれを使用します。 とりあえず何かテキストを表示します。 canvas は必ず必要です。Stage は最上位のコンテナで、update することで子オブジェクトを描画します。 <!DOCTYPE html> <head> <script src='easeljs-0.7.0.min.js'></script> <script
CreateJS WebFont テキストアニメーション｜javascript｜POPSブログ｜POPS WEB KOUBOU
テキストアニメーションで、一番問題になるのがフォントの種類の指定が容易に出来ないことです。Google WebFont を利用してテキストをアニメーションして見ます。 英字のみですが最近は種類も増えましたので、大変便利です。 easeljs-0.7 でのテストです。 CreateJS WebFont テキストアニメーションのテスト フォントは 表情、感情、個性、を持ちますので、その時のコンテンツ表現に最適なフォントを使用するのも方法の一つで、ビジュアルデザインに大きく影響を与える要素です。 Google WebFont は簡単に取り込み使用出来ます。 DEMO CreateJS WebFont テキストアニメーションのテストデモ、(createJS041.js) このページはHTML5では有りませんので、デモページでご覧ください。「IE7.8」ではご覧いただけません。 /// 注意、ブラウ
FN1210005 - EaselJSのMatrix2Dクラスを使ったインスタンスの変形 - HTML5 : テクニカルノート
Matrix2Dクラスは、2次元平面の座標を数学の行列により変換します。Matrix2Dクラスの変換行列を使うと、インスタンスに移動や伸縮、回転、傾斜などの変形を組合わせて加えることができます。「EaselJSを使ったインスタンスの傾斜・伸縮・移動」と同じような変形を、今度はMatrix2Dクラスという別の道具で試してみましょう。 01 読込んだ画像の3つの角にハンドルを置く 前出「EaselJSを使ったインスタンスの傾斜・伸縮・移動」のコード001では、画像の右上角に置いたハンドルでインスタンスを傾斜および伸縮させました。本稿ではハンドルを3つに増やして、Matrix2Dクラスによりインスタンスの座標変換を行います(図001)[*1]。 図001■3つのハンドルをドラッグすると画像が変形する まず、PNGファイル(image.png)はHTMLドキュメントと同じ場所のフォルダに(imag
FN1501003 | EaselJS 0.8.0: Matrix2Dクラスの基本的なメソッドと行列演算 | HTML5 : テクニカルノート
EaselJSライブラリのMatrxi2Dクラスによる座標変換は、おもに変換行列の乗算で表されます[*1]。そこで、Matrix2Dクラスの基本的なメソッドについて、その行列演算をご紹介します。
EaselJS 0.8.0のMatrix2Dクラスにおける座標変換のメソッドの演算仕様が変わった
Matrix2Dクラスの座標変換のメソッドは、行列の乗算で表されます。新しいEaselJS 0.8.0では、多くのメソッドの乗算の順序が改められました。行列の乗算に交換法則は成立ちませんので、古いバージョンのメソッドと異なる結果を生じることになります。そこで、0.7.1以前のバージョンのメソッドと同じ結果が得られる式を簡単にご紹介します(仕様変更された行列演算について詳しくは、「EaselJS 0.8.0: Matrix2Dクラスの基本的なメソッドと行列演算」をお読みください)。 Critical changes of the Matrix2D's transform methods in the EaselJS 0.8.0 The transformation methods of the Matrix2D class are represented by multiplication
FN1308001 | EaselJSのMatrix2Dオブジェクトの変換行列を適用する | HTML5 : テクニカルノート
説明 Matrix2Dオブジェクトの変換行列は、DisplayObjectやPointのインスタンスに適用して座標変換が加えられます。また、変換した後のプロパティ値をObjectインスタンスに納め、他の座標変換に用いることもできます。 Matrix2Dオブジェクトの変換行列でDisplayObjectインスタンスを変形したいときは、Matrix2D.decompose()メソッドの引数にインスタンスを渡して呼出します。すると、変換行列から導かれる位置や伸縮、傾斜、回転などのプロパティがObjectインスタンスに与えられます。 Matrix2Dオブジェクト.decompose(DisplayObjectインスタンス) Matrix2D.decompose()メソッドの引数は、DisplayObjectインスタンスにはかぎりません。また、引数を省くとプロパティが納められた新たなObjectイン
CreateJSで遊んでみる 1日目 EaselJS - WebDelog
2015.06.16 記事の内容を全面的に書き直しました。 目次 CreateJS とは何者なのか? EaselJS をはじめるための準備 EaselJS を使うメリット Canvas にはオブジェクトを管理する機能はない Canvas はウォールペイントのようなもの？ ベクター図形の描画がよりわかりやすく便利に 豊富なフィルター機能 実際に触ってみる CreateJS を使うための準備 Stage を配置する EaselJS DisplayObjects Shepeクラスと Graphicsクラスでベクターシェイプを描く Bitmapクラス で画像を読み込む Tickerクラスを使ってアニメーションを実装する MouseEvent でクリックでアクションを起こす 終わりに CreateJS とは何者なのか? CreateJSはHTML5の技術を利用した インタラクティブなコンテンツを作成
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
EaselJS v1.0.0 API Documentation : SpriteSheetBuilder
EaselJS Example: SpriteSheetBuilder
EaselJS の SpriteSheetBuilder クラス - .Lab