HTML5 canvas静止描画方法(線形グラデーション)

前回の続きで、HTML5の新要素であるcanvas。
今回は線形グラデーションでの描画方法について。

 

作ったデモサイト

こんな感じです。
 

共通の書き方

<canvas id="canvas0" width="500" height="500">
</canvas>

width, heightで描画範囲を規定。

 

縦向きグラデーション

	var canvas0 = document.getElementById("canvas0");
	var c0 = canvas0.getContext("2d");

	var g = c0.createLinearGradient(0, 0, 0, 500);
	g.addColorStop(0, "red");
	g.addColorStop(0.5, "green");
	g.addColorStop(1.0, "blue");

	c0.fillStyle = g;
	c0.fillRect(0, 0, 500, 500);

「.createLinearGradient(x0, y0, x1, y1)」メソッドを使ってグラデーションさせたい開始点と終了点を定義します。
今回は(x0, y0, x1, y1) = (0, 0, 0, 500)なので、(0, 0)地点が開始点、(0, 500)地点が終了点となります。

「.addColorStop(offset, color)」で図形のどの位置をどの色にするかを指定するカラーストップを設定します。
offsetは開始点と終了点の相対位置で、0.0から1.0までの値を指定します。

あとはこのグラデーションを「c0.fillStyle」プロパティに設定し、canvas上に矩形を描いて完成です。

 

縦向きグラデーション

	var canvas1 = document.getElementById("canvas1");
	var c1 = canvas1.getContext("2d");

	var g = c1.createLinearGradient(0, 0, 500, 0);
	g.addColorStop(0, "red");
	g.addColorStop(0.5, "green");
	g.addColorStop(1.0, "blue");

	c1.fillStyle = g;
	c1.fillRect(0, 0, 500, 500);

上記の例から変えたのは、「var g = c1.createLinearGradient(0, 0, 500, 0);」の終了点の座標だけです。
yの値をどちらも0にすることにより水平方向のグラデーションにしています。

 

斜め向きグラデーション

	var canvas2 = document.getElementById("canvas2");
	var c2 = canvas2.getContext("2d");

	var g = c2.createLinearGradient(0, 0, 500, 500);
	g.addColorStop(0, "red");
	g.addColorStop(0.5, "green");
	g.addColorStop(1.0, "blue");

	c2.fillStyle = g;
	c2.fillRect(0, 0, 500, 500);

こちらも同様で、「var g = c1.createLinearGradient(0, 0, 500, 500);」と、終了点の座標を変更してグラデーションの方向を対角線となるようにしただけです。

 

こんな感じで以上。