dojoを拡張する：DojoX GFXによる図形描画（後編）

d. グラデーション

　前回、色を塗りつぶした長方形を描画する方法を紹介したが、より細かく設定すると、グラデーションを実現できる。以下に水平、斜めの各方向のグラデーションの例を示す。

水平方向のグラデーション

      group.createRect( { x : 25, y : 50, width : 150, height : 100 } )
           .setFill( { type: 'linear', x1 : 0, y1 : 0, x2 : 150, y2 : 0,
                       colors: [ { offset : 0.2, color : 'yellow' },
                                 { offset : 0.9, color : 'green' } ] } );

図5 水平方向のグラデーションの描画例

斜め方向のグラデーション

      group.createRect( { x : 25, y : 50, width : 150, height : 100 } )
           .setFill( { type: 'radial', cx : 10, cy : 50, r : 120,
                       colors: [ { offset : 0.2, color : 'yellow' },
                                 { offset : 0.7, color : 'green' } ] } );

図6 斜め方向のグラデーションの描画例

　この連載は今回で最後となるが、dojoの世界はまだまだ広大だ。新たな表現手段を得て、これまでとは違うWebコンテンツの作成に挑戦していただきたい。