Canvasでグラデーションも自由に
こんにちは。宗定洋平(@yoheiMune)です。
HTML5の可能性を探りたい。そんな思いの中、Canvasのグラデーション描画機能を試してみたのでブログに残したいと思います。
Canvasのグラデーション描画機能を利用した感想は、「比較的簡単にグラデーションを描画できるなぁ」でした。デザインセンス抜群の人がグラデーションを作ると、見た目のよいWebサイトが作れるのでは?と思いました。
http://html5learner.appspot.com/html/canvas/gradation.html
Canvasのグラデーションは2種類
線形グラデーション(Linear Gradation)
上図では1段目のグラデーションです。縦シマ、横シマ、斜めシマのグラデーションを実現できました。
円形グラデーション(Radial Gradation)
上図では2段目のグラデーションです。ドーナツ型などのグラデーションを実現できました。
注意事項
ちょっと古いブラウザ(Safari2.0など)では、正しくグラデーションが描画されない可能性があります。ブラウザ最新版では正しく描画できるようです。