[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)
WebGL Support in EaselJS - CreateJS Blog
Please note that SpriteStage & SpriteContainer classes are now deprecated and have been replaced by the much faster and easier to use StageGL! As WebGL becomes more widely supported in browsers, we’re proud to announce that after working in collaboration with Mozilla, a shiny new WebGL renderer for EaselJS is now in early beta! Following research, internal discussions, and optimizations, we’ve man
Android × Canvas の即死ポイントとその回避策 | buccchi.jp
CreateJS を使ったWebアプリをいくつか作ったのですが、iPhone はサクサクでも Android でやたらハマる。 Android 2.3 で最適化したつもりのものが 4.0 の標準ブラウザで落ちたりする。 機種や OS のバージョンにより動作がさまざまなため確認しきれない。 というとこでハマったポイント3つを共有します。 誰かもっとよい解決策を教えてくれるとありがたい。 即死ポイントその1 Android 4.0.4 で Canvas をリサイズするとブラウザが落ちる 回避策 Canvas 領域を広めにとっておき、Canvas ではなく Container 側をリサイズ。 はみでた部分は css でトリミング。 これで落ちなくはなるが全体的にボケる。 2013.7.7 追記 その後、以下の方法を試したところ落ちずに動作すことが確認できました。 描画とかGPUアクセラレーション
CreateJSでHTML5向けのJavaScriptコーディングをしよう - JaGra PROFESSIONAL SCHOOL Seminar
【お品書き】 01 EaselJSのアニメーション 02 スプライトシートからつくるアニメーション 03 TweenJSを使ったトゥイーンアニメーション 04 PreloadJSで画像ファイルを読込む 05 SoundJSでサウンドファイルを読込んで再生する 本稿は、2011年11月8日木曜日に同名で開かれたセミナーの概要を伝える目的で公開する。 CreateJS Suiteは、リッチでインタラクティブなコンテンツをつくるJavaScriptライブラリ群だ。各ライブラリは、予めCreateJSサイトからダウンロードしてインストールしておかなければならない。その手順については、「EaselJSで図形を描く」を参照してほしい。 01 EaselJSのアニメーション 01-01 canvas要素を定める canvas要素をbody要素の中に書くと、透明な領域が定められ、JavaScriptで図形
EaselJS の概要 (CreateJS のフレームワークその 1) - akihiro kamijo
前の記事で紹介した Flash Professional Toolkit for CreateJS は、CreateJS と呼ばれるオープンソースのフレームワーク群の使用を前提としています。そのため、Flash Pro から書き出された html ファイルと js ファイルは、Canvas の API を利用する代わりに CreateJS の API を呼び出します。 デモビデオ内で紹介されたコードは、こんな感じでした。 (lib.shadow2 = function() { this.initialize(); this.shape = new Shape(); ... ということで、書き出されたコンテンツの編集をするには、CreateJS の使い方を学ばないとダメそうです。 （単純なタイムラインアニメーションは別として...） ただし、これは、AS3 の知識がある人には、むしろ良い話か
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
