libro
www.tuyano.com
JavaScriptによるHTML5プログラミング入門

Canvasによるグラフィック描画(2) (2/7)

作成:2010-07-15 19:03
更新:2010-07-15 19:03

■円形グラディエーションの作成

グラディエーションには、もう１つの方式があります。それは２つの円の形に沿ってグラディエーションさせていく、というものです。これは、例えばお日様の絵を描く時に、太陽の周りを次第にグラディエーションさせたりするでしょう？　ああいう感じですね。

この円形のグラディエーションは、「createRadialGradient」というメソッドを使ってオブジェクトを作成します。
createRadialGradient( 横位置1, 縦位置1, 半径1, 横位置2, 縦位置2, 半径2 );
このメソッドでは、２つの円の位置と大きさをそれぞれ指定します。これにより、１つ目の円の中心から２つ目の円の輪郭に向けてモーフィングするようにしてグラディエーションをするわけですね。

色の設定は、線形の場合と同様に「addColorStop」メソッドで行ないます。０～１の間の実数で色の位置を指定します。ゼロなら１つ目の円の中心、１なら２つ目の円の輪郭部分にその色が表示されるようになるわけです。

では、先ほどのサンプルを、createRadialGradientに修正した例をあげておきましょう。まったくそのままじゃつまらないので、今回はそれぞれ３つの色をaddColorStopで追加してみました。かなり派手なグラディエーションが簡単に作れますね。

※プログラムリストが表示されない場合

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プログラミング入門」に戻る