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

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

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

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

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

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

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

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

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

注意事項

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

最後に

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

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