HTML5には、SVG、Canvas、WebGLといった、ビジュアル関係で追加された要素があります。

これらはとても便利で、

インパクトのあるサイト作りには強い味方になります。

ただ、ブラウザや端末により、これらの要素が使えない場合もあります。

クロスブラウザの問題です。
また、SVG、Canvas、WebGLのそれぞれで、強みを発揮する部分が違っており、

強みを発揮するために、それぞれを使いこなそうとすると、

使い方がバラバラなので、多くのことを事前に学習する必要が出てきます。
クロスブラウザ対策のために、ブラウザごとにそれらを切り替えるとなると、

なおさら大変です。
この問題を解決してくれるのが「Two.js」です。

Two.js
Two.js: Examples (公式のDEMO)

 

「Two.js」はベクター系のグラフィックを扱うことのできる、

JavaScriptのライブラリーで、

簡単にベクターグラフィックを扱えるようになるだけでなく、

SVG、Canvas、WebGLから描画方法を選ぶことができます。

 

そのため、SVG、Canvas、WebGLそれぞれのために、

別々でコードを書く必要がなくなり、

ブラウザーごとの切り替えも容易になります。

そのため、このライブラリを使うと、

これまで以上にSVG、Canvas、WebGLを使うリスクを下げることができ、

実用での利用を身近なものにしてくれます。

 

↓作ってみたもの SVG、Canvas、WebGL切り替えのDEMO

DEMO

切り替わっていることが、ほとんどわからないくらい同じように描画してくれます。

 

 基本的な使い方

公式サイトよりライブラリをダウンロードして、htmlで読み込みます。

 

次に、グラフィックを描画する領域をhtmlで用意します。

 

そして、Two.jsのコードを書きます。

まずは、描画の準備です。

 

次に、グラフィックを指定して、描画します。

こちらは円を表示する場合の例です。

 

アニメーションは以下のように指定します。

 

アニメーション関連では、

HTML5のrequestAnimationFrameを利用しているので、

安定性の高いものを実現できます。

 

Illustratorなどで作ったSVGを利用したい場合は以下のようにします。

HTML

CSSでdisplay:noneにした要素に読み込ませたいSVGのコードをコピー&ペーストします。

 JavaScript

こちらの例ではjQueryを合わせて使っています。

 

jQueryともぶつかることがないので、合わせて使うと、

Two.jsがより使いやすくなります。