CSS3を駆使して描く！「Donatello」

皆さんこんにちは！B3の坂井(mozuku)です．
AdventCalenderも、もう残り一週間となりました．

普段はWeb班では無いですが、今回はWebっぽいコンテンツ
ドローライブラリ「Donatello」を紹介したいと思います！

Donatelloって？
Donatelloは幾何学模様をJavaScript,CSS3で描くドローライブラリです．
ブラウザ上にどれくらいキレイなグラフィックスを書けるのか，いかに手軽に実現できるのかHTML5によって広がった描画の幅を知るのに最適なライブラリです．

CanvasではなくCSS3で描画するところに「Donatello」の面白さはあるとおもいます！

Canvasの簡単なおさらい
比較にも出したことなのでCanvasも簡単なおさらいをしましょう．

*Canvas Sample
$(document).ready(function(){

 /*create CanvasElement*/
 $('body').append('');
 
 /*create 2d context obj*/
 var context = $('canvas').get(0).getContext('2d'); 

 /*draw square*/ 
 context.beginPath();
 context.moveTo(20,20);
 context.lineTo(120,20);
 context.lineTo(120,120);
 context.lineTo(20,120);
 context.closePath();
 context.stroke();

});

ソースコードの内容はこんな感じです．
beginPath：描画開始宣言
moveTo：始点座標の指定
lineTo：終点座標の指定
closePath：描画終了宣言

このソースコードで図のような描画ができます．
lineTo等を見ればわかるとおり、座標位置等を意識し描画しています．
ここでの肝は「ソースから安易には正方形だとは読みとれないこと」です．

Donatelloで描画してみる
百聞は一見に如かずサンプルをとりあえずみてみましょう．

*Donatello Sample
$(document).ready(function(){
 /*Convert DOM Element*/
 var paper = Donatello.paper('paper-div', 20, 20, 500, 500);
 /*draw ellipse*/
 var ellipse = paper.ellipse(250, 250, 120, 75, {
  'stroke-width':4,
  'stloke': '#FFFFFF'
 });
 
});

Donatelloは上記のような形で記述します．
Donatelloの描画領域はpaperと呼ばれ、DOM要素となっています．
また、描画される要素も個々にDOM要素として描画されます。

複雑な例ではこのような描画が可能です．

for( var i=0; i < 8; i ++ ) {
    var x = Math.cos( i*Math.PI/4 )*r;
    var y = Math.sin( i*Math.PI/4 )*r;
    var circle = paper.ellipse( 250 + x, 250 + y, 120, 75, { 
        'stroke-width': 4*i,
        'stroke': colors[i%8],
        'stroke-style': 'solid'
    });
    ellipse.rotate( (i*Math.PI/4)*180/Math.PI );
}

このソースであれば、以下の図のような描画が行えます。

ここでDonatelloを使う4つの利点をあげたいと思います．
・描画領域は'紙'と呼ばれる一つのオブジェクトとして管理されること
・四角や円、楕円、多角形といった形を描画するという仕組み→コードの理解が安易
・描画された形は一つのオブジェクトであること
・ｊQuery等外部ライブラリへの対応

特に3つ目の1つ1つがオブジェクトであるという点はCanvasでの描画と違い、一度描いたものの一部分だけを操作できる等の利点であるといえます．


まとめ
Webデザイナー等にとってはCSS等の知識を使って扱えるDonatelloは便利かも
CanvasだけがHTML5での描画方法じゃない!
(SVG⇔Donatello変換ソフトウェアとかあったら便利そう！)←言うのはタダ


これだけじゃなくHTML5と総括される技術分野は様々なチャレンジ要素があるとおもいます。
Web系なみなさんどんどん遊びましょう!(そして面白いことを紹介してください！)

記事を見て気になったら↓
dnewcome/Donatello - Github


そんなこんなで本当に触りだけとなりましたが、Donatelloのご紹介とさせていただきます．

以上mozukuでした！