2012/01/28更新

[HTML5] Canvasでグラデーションも自由に

このエントリーをはてなブックマークに追加            

HTML5の可能性を探りたい。そんな思いの中、Canvasのグラデーション描画機能を試してみたのでブログに残したいと思います。

Canvasのグラデーション描画機能を利用した感想は、「比較的簡単にグラデーションを描画できるなぁ」でした。 デザインセンス抜群の人がグラデーションを作ると、見た目のよいWebサイトが作れるのでは?と思いました。

f:id:yoheiM:20110415205930p:image

http://www.yoheim.net/labo/html5/canvas/gradation.html




Canvasのグラデーションは2種類

線形グラデーション(Linear Gradation)

上図では1段目のグラデーションです。縦シマ、横シマ、斜めシマのグラデーションを実現できました。

円形グラデーション(Radial Gradation)

上図では2段目のグラデーションです。ドーナツ型などのグラデーションを実現できました。




注意事項

ちょっと古いブラウザ(Safari2.0など)では、正しくグラデーションが描画されない可能性があります。ブラウザ最新版では正しく描画できるようです。




最後に

Canvasはグラデーションも含め、様々な描画が簡単に出来るようです。多くのブラウザでCanvasを使えるので、Canvasはアイデアによっては様々な可能性を秘めているのかなと感じました。

HTML5について、Facebookページにも掲載していますので、ご覧頂けると幸いです。







こんな記事もいかがですか?

RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。