[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 開発支援サイト wgld.org
次なる Web を見据えて 来たるべき WebGL2 の時代へ 2011 年、最初のバージョンである 1.0 が勧告された WebGL は、ウェブブラウザ上で OpenGL ES に相当するグラフィックス API の機能を利用することができる JavaScript の API です。 そして 2016 年、WebGL の正当な後継バージョンとなる WebGL2 (もしくは WebGL 2.0) がいよいよ本格的に利用できる段階になりつつあります。 当サイトでは、2012 年の開設以来、WebGL 1.0 系の API を用いるための技術解説を掲載してきました。そして今後は、時代の変遷に合わせて WebGL 2.0 系の解説記事も公開していく方針です。 WebGL 2.0 が登場するとは言っても、後方互換を保つという意味もあって 意図的に有効化 しない限りは WebGL 1.0 相当の AP
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 複数のWebフォントをサイトにUploadしてCanvasで使用する｜javascript｜POPSブログ｜POPS WEB KOUBOU
「Google Webフォント」もよろしいのですが、自分用の好みのWebフォントを作り、複数のWebフォントをサイトにUploadしてCanvasでの使用表示を試してみました。 表示方法としてCSS3、@font-face を使用する方法と、WebFont Loader を使用する方法の2種類にどんな違いがあるのでしょうか、実際にテストしてみます。 CreateJS 複数のWebフォントをサイトにUploadしてCanvasで使用するテスト 「Google Webフォント」は便利ですが、今回はWebフォントを作り、複数のWebフォントをサイトにUploadしてCreateJSで使用する方法について調べ、実際にテストして問題があるか考慮してみます。 ▼[ 簡単な説明の目次に進む ] DEMO ▼[ 目次 ] CreateJS 複数のWebフォントをサイトにUploadしてCanvasで使用す
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
第12回 スプライトシートでアニメーションをつくる | gihyo.jp
今回のお題では、次のようなJavaScriptコードを書いた。情報オブジェクト（data）のimagesプロパティには、スプライトシートのパス（file）ひとつを配列に納めて与えた。framesプロパティには、Objectインスタンスで幅と高さ、および基準点の座標を定めた。 {width:幅, height:高さ, regX:水平基準点, regY:垂直基準点} animationsプロパティの中身については、この後説明する。こうして設定した情報オブジェクトがSpriteSheet()コンストラクタに渡され、できあがったSpriteSheetオブジェクト（mySpriteSheet）は、さらにBitmapAnimation()コンストラクタの引数にして、BitmapAnimationオブジェクト（mySprite）がつくられている。 var data = {}; data.images =
canvg.js·SVGをパースしてCanvas上に描画 MOONGIFT
HTML5になってから新しく出てきたグラフィックス要素にSVGとCanvasがあります。Canvasはバイナリとして生成され、SVGはベクターデータでありその使い分けはできるでしょう。しかし逆にSVGデータをCanvas内に描画したい時もあるはずです。 そこで使ってみたいのがcanvg.jsです。SVGデータをパースし、Canvas内に描画してくれるライブラリです。 canvg.jsの使い方 サンプルです。右側が素のSVG、左側がcanvg.jsによる出力です。 テキスト出力の再現度も高いです。 こんな細かい帳票も再現できます。 カラーリングにも対応。 canvg.jsはさらにオブジェクトを描画したり、アニメーションにも対応しています。SVGをSVGのままだけでなく、Canvasと組み合わせることでゲームに使ったり、編集不可のデータを生成したりするのに使えそうです。 canvg.jsはJa
Professor Cloud
SVG to HTML5 Canvas Converter This tool converts SVG into an HTML5 Canvas JavaScript function. It will work with any host, and I hope it helps people to experiment with Canvas. Most vector art packages (Illustrator, Inkscape etc) can export as SVG. It uses a modified version of the excellent Canvg library. Canvg usually renders the SVG immediately and does not output JavaScript source code. Having
CreateJSで遊んでみる 1日目 EaselJS - WebDelog
2015.06.16 記事の内容を全面的に書き直しました。 目次 CreateJS とは何者なのか? EaselJS をはじめるための準備 EaselJS を使うメリット Canvas にはオブジェクトを管理する機能はない Canvas はウォールペイントのようなもの？ ベクター図形の描画がよりわかりやすく便利に 豊富なフィルター機能 実際に触ってみる CreateJS を使うための準備 Stage を配置する EaselJS DisplayObjects Shepeクラスと Graphicsクラスでベクターシェイプを描く Bitmapクラス で画像を読み込む Tickerクラスを使ってアニメーションを実装する MouseEvent でクリックでアクションを起こす 終わりに CreateJS とは何者なのか? CreateJSはHTML5の技術を利用した インタラクティブなコンテンツを作成
project-nya.jp - このウェブサイトは販売用です！ - フラッシュ にゃあ にゃんこ プロジェクト ウェブ ジェクト ひろゆき リソースおよび情報
このウェブサイトは販売用です！ project-nya.jp は、あなたがお探しの情報の全ての最新かつ最適なソースです。一般トピックからここから検索できる内容は、project-nya.jpが全てとなります。あなたがお探しの内容が見つかることを願っています！
HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う 記事一覧 | gihyo.jp
運営元のロゴ Copyright © 2007-2024 All Rights Reserved by Gijutsu-Hyoron Co., Ltd. ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。
hitagi.js - HTML5向けゲームフレームワーク MOONGIFT
Webブラウザの機能がアップし、さらにハードウェアの性能が向上するのに合わせて実行速度も速くなっています。ちょっと前のゲームレベルであれば十分にWebブラウザ上でこなせるようになっています。 そんなWebブラウザを活用してゲーム開発を行えるのがhitagi.jsです。 hitagi.jsの使い方 hitagi.jsを使ったデモです。 Canvasを使って描画しています。 new hitagi.World() から処理がはじまっています。 Flappy Bird風ゲームもあります。これくらいのゲームであればWebブラウザでも十分です。 ちゃんとクリックで遊べるようになっています。 hitagi.jsはCanvasへの描画なので性能が良いのがポイントです。また、Canvasさえ使えればブラウザに関係なく利用できるのも利点と言えるのではないでしょうか。hitagi.jsは2D系ゲームに使えるよう
HTML5モーション制作のテクニックとデータ最適化の必要性―CreateJS勉強会/池田発表資料 - ICS MEDIA
2015年9月4日（金）、CreateJS勉強会 (第6回） がICTCOで95人の定員規模で開催されました。勉強会のフォローアップとして、発表資料「HTML5モーション制作のテクニックとデータ最適化の必要性」（発表者：池田）のスライドを一部抜粋して記事という形で公開します。 バナー広告にみるFlash(SWF)の衰退とHTML5の隆盛 HTML5モーションコンテンツの代表的な活用分野として「ウェブページ」「ゲームコンテンツ」、そして「広告」があります。今回は「広告」をテーマとして最近の話題から紹介します。2015年9月1日にリリースされたGoogle Chrome 45からウェブページ内の主要でないFlash(SWF)コンテンツがブロックされるようになりました（参考記事「In June, we announced (https://goo.gl/TF7dmD) that Chrome w
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
EaselJS v1.0.0 API Documentation : SpriteSheetBuilder
SVG のパスを利用して、パーティクルで文字を作り上げるようなの - .Lab
http://yamineko.lv9.org/Fabric.js%20Javascript%20Canvas%20Library/fabric-intro-part-1/fabric-intro-part-1.html
SVG / CSS３ / canvas を使った素敵なサイトまとめ - C site