こんにちは、フロントエンド・エンジニアの荒井です。 今回はHTML5のSVG, Canvas, WebGLに対応したJavaScriptの2次元描画ライブラリ「Two.js」のご紹介です。 SVGデータを元にしたアニメーションのサンプル Two.js を使ってSVGデータを元に図形を配置 Two.jsではベクターベースの2次元描画機能を一通り揃えており、四角形や円(楕円も含む)などの基本的な図形を描画したり、直線/曲線を繋げて独自の図形を描画する事が可能になります。 Flash-ActionScriptで言う所のGraphicsクラスに相当する機能になるかと思います。 これだけであれば想像通りの機能だとは思いますが、Two.jsが面白いのはその図形を構成している直線/曲線の頂点(コントロールポイントも含む)の座標を後から操作出来るようになっているという点です。 これによって、図形のひとつひ
![【前編】気軽かつ高機能なベクターベースの2次元描画ライブラリTwo.jsのご紹介](https://cdn-ak-scissors.b.st-hatena.com/image/square/85f1735d32c7d4a98e45833fd75d8e5fe2553cdb/height=288;version=1;width=512/https%3A%2F%2Ftogalu.jp%2Flacne%2Fowned_media%2Fupload%2Ftogalu20.jpg)