HTML5だからこそ。Canvasタグを使って幾何学模様を描く「Turtle Wax」
Turtle WaxはCanvasタグを使ってJavaScriptで幾何学模様を描くライブラリ。
[/s2If]
Turtle WaxはJavaScript製のオープンソース・ソフトウェア。HTML5が本格化する中で、見逃せない機能の一つがCanvasタグだ。実験的な試みが色々行われているが、これまでFlashで行っていたような操作がJavaScriptだけで実現できるようにさえなっている。
デモ1
これまでグラフィックスを描こうと思うとFlashを使うか、画像を作成するかのどちらかしか選択肢がなかった。だがCanvasを使えばクライアントサイドでレンダリングができるようになる。幾何学模様を描くならばTurtle Waxに注目したい。
Turtle WaxはJavaScriptを使って幾何学模様を簡単に描くことができるライブラリだ。デモとして四角やその四角を回転させて描く図形が紹介されている。ここの“A Square”という文字もTurtle Waxを使ってCanvas上に描かれたものだ。
デモ2
さらにギアのような形が回転しながら広がっていく図、フラクタル画像を描くデモもある。そのいずれもTurtle Waxを使えばそれほど長くないコードで描けるようになっている。Web上でシステムと連携した幾何学模様を描くような場合にはぜひ使ってみたいライブラリだ。
デモ3（プレミアム限定）
[/s2If] [s2If !current_user_can(access_s2member_level1)]
MOONGIFTは読者の皆さまのサポートによって運営されています。ぜひプレミアム登録お願いします！月 額500円の他、半年（3,000円）、年間パック（6,000円）もあります。！ プレミアムユーザのログインはこちらから
[/s2If]
MOONGIFTはこう見る
通常の画像と異なり、JavaScriptのパラメータを変更するだけで描画内容をその場で変更できるのがCanvasの魅力だろう。さらにサーバサイドとも異なるので、フォントがクライアントサイドにあるものを使って奇麗に描けるのも良い。
Canvas自体はベクターベースなので、細かい線はもとより拡大しても奇麗なままなのも魅力だ。幾何学模様のような細かく整然とした線が求められる場合には特に有効だろう。
[/s2If]