back
Canvasによるグラフィック描画(2) (2/7)
■円形グラディエーションの作成
グラディエーションには、もう１つの方式があります。それは２つの円の形に沿ってグラディエーションさせていく、というものです。これは、例えばお日様の絵を描く時に、太陽の周りを次第にグラディエーションさせたりするでしょう？ ああいう感じですね。
この円形のグラディエーションは、「createRadialGradient」というメソッドを使ってオブジェクトを作成します。
色の設定は、線形の場合と同様に「addColorStop」メソッドで行ないます。０～１の間の実数で色の位置を指定します。ゼロなら１つ目の円の中心、１なら２つ目の円の輪郭部分にその色が表示されるようになるわけです。
では、先ほどのサンプルを、createRadialGradientに修正した例をあげておきましょう。まったくそのままじゃつまらないので、今回はそれぞれ３つの色をaddColorStopで追加してみました。かなり派手なグラディエーションが簡単に作れますね。
この円形のグラディエーションは、「createRadialGradient」というメソッドを使ってオブジェクトを作成します。
createRadialGradient( 横位置1, 縦位置1, 半径1, 横位置2, 縦位置2, 半径2 );このメソッドでは、２つの円の位置と大きさをそれぞれ指定します。これにより、１つ目の円の中心から２つ目の円の輪郭に向けてモーフィングするようにしてグラディエーションをするわけですね。
色の設定は、線形の場合と同様に「addColorStop」メソッドで行ないます。０～１の間の実数で色の位置を指定します。ゼロなら１つ目の円の中心、１なら２つ目の円の輪郭部分にその色が表示されるようになるわけです。
では、先ほどのサンプルを、createRadialGradientに修正した例をあげておきましょう。まったくそのままじゃつまらないので、今回はそれぞれ３つの色を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();
}
}
| << 前へ | 次へ >> |