Canvasによるグラフィック描画(2) (2/7)
作成:2010-07-15 19:03
更新:2010-07-15 19:03
更新:2010-07-15 19:03
■円形グラディエーションの作成
グラディエーションには、もう1つの方式があります。それは2つの円の形に沿ってグラディエーションさせていく、というものです。これは、例えばお日様の絵を描く時に、太陽の周りを次第にグラディエーションさせたりするでしょう? ああいう感じですね。
この円形のグラディエーションは、「createRadialGradient」というメソッドを使ってオブジェクトを作成します。
色の設定は、線形の場合と同様に「addColorStop」メソッドで行ないます。0~1の間の実数で色の位置を指定します。ゼロなら1つ目の円の中心、1なら2つ目の円の輪郭部分にその色が表示されるようになるわけです。
では、先ほどのサンプルを、createRadialGradientに修正した例をあげておきましょう。まったくそのままじゃつまらないので、今回はそれぞれ3つの色をaddColorStopで追加してみました。かなり派手なグラディエーションが簡単に作れますね。
この円形のグラディエーションは、「createRadialGradient」というメソッドを使ってオブジェクトを作成します。
createRadialGradient( 横位置1, 縦位置1, 半径1, 横位置2, 縦位置2, 半径2 );このメソッドでは、2つの円の位置と大きさをそれぞれ指定します。これにより、1つ目の円の中心から2つ目の円の輪郭に向けてモーフィングするようにしてグラディエーションをするわけですね。
色の設定は、線形の場合と同様に「addColorStop」メソッドで行ないます。0~1の間の実数で色の位置を指定します。ゼロなら1つ目の円の中心、1なら2つ目の円の輪郭部分にその色が表示されるようになるわけです。
では、先ほどのサンプルを、createRadialGradientに修正した例をあげておきましょう。まったくそのままじゃつまらないので、今回はそれぞれ3つの色をaddColorStopで追加してみました。かなり派手なグラディエーションが簡単に作れますね。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
function draw(id) { var canvas = document.getElementById(id); if (canvas == null) return false; var context = canvas.getContext('2d'); var g1 = context.createRadialGradient(400,0,0,400,0,400); g1.addColorStop(0.1,'rgb(255,255,0)'); g1.addColorStop(0.3,'rgb(255,0,255)'); g1.addColorStop(1,'rgb(0,255,255)'); context.fillStyle = g1; context.fillRect(0, 0, 400, 300); var n = 0; var g2 = context.createRadialGradient(250,250,0,250,250,300); g2.addColorStop(0.1,'rgba(255,0,0,0.5)'); g2.addColorStop(0.7,'rgba(255,255,0,0.5)'); g2.addColorStop(1,'rgba(0,0,255,0.5)'); for(var i = 0; i < 10; i++) { context.beginPath(); context.fillStyle = g2; context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true); context.closePath(); context.fill(); } }
※関連コンテンツ
「JavaScriptによるHTML5プログラミング入門」に戻る