[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
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
HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う 記事一覧 | gihyo.jp
運営元のロゴ Copyright © 2007-2025 All Rights Reserved by Gijutsu-Hyoron Co., Ltd. ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://yamineko.lv9.org/Fabric.js%20Javascript%20Canvas%20Library/fabric-intro-part-1/fabric-intro-part-1.html
http://www.professorcloud.com/svg-to-canvas/
