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

前回、描画の基本はだいたい説明しました。今回は、その他の「覚えておくと便利な機能」についていろいろ紹介していきましょう。まずは、「塗りつぶし」についてです。

前回、塗りつぶしを設定するfillStyleには「色の値を設定する」と説明しました。が、これは実は正しくはありません。色の値以外にも、設定できるものはあるのです。塗りつぶしに関するオブジェクトを用意し、これを設定することができるのです。

まずは、「グラディエーション」からやってみましょう。グラディエーションというのは、ある色からなめらかに別の色に変化していく塗りつぶし法ですね。これにはいくつかの種類がありますが、まずはもっとも簡単な「２点の間を直線的にグラディエーションする」というものからです。

これは、「LinearGradient」と呼ばれるものとしてHTML5には用意されています。コンテキストの「createLinearGradient」というものを使い、

createLinearGradient( 横位置1, 縦位置1, 横位置2, 縦位置2 );

このように、２つの位置を指定してオブジェクトを作成します。「あれ？　色の設定は？」と思った人。それはオブジェクト作成後、メソッドを呼び出して行ないます。

addColorStop( 開始位置 , 色 );

これが、使用する色の情報を追加するためのメソッドです。第１引数の「開始位置」は、０～１の間の実数を指定します。createLinearGradientの最初の点の位置がゼロ、次の点の位置が１で、その色の位置を小数で設定します。

グラディエーションですから、最低限２つの色をaddColorStopで追加する必要があります。２つ以上の色を追加することも可能です。例えば「青から途中で白になり、最後は緑になる」というのなら、０地点に青、0.5に白、１に緑をそれぞれaddColorStopすればいいわけですね。

こうして作成されたオブジェクトを、fillStyleに設定してからfillすれば、指定したグラディエーションで図形が塗りつぶされる、というわけです。

例として、簡単な描画サンプルを下に上げておきましょう。背景は、上から下にかけて黄色からシアンにグラディエーションしています。その上に連続して描かれた円は、左から右に向けて、青から赤に変化しています。

(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.createLinearGradient(0,0,0,300);
	g1.addColorStop(0,'rgb(255,255,0)');
	g1.addColorStop(1,'rgb(0,255,255)');
	context.fillStyle = g1;
	context.fillRect(0, 0, 400, 300);
	var n = 0;
	var g2 = context.createLinearGradient(0,0,300,0);
	g2.addColorStop(0,'rgba(0,0,255,0.5)');
	g2.addColorStop(1,'rgba(255,0,0,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();
	}	
}