HTML5 Canvasでグラデーションを描画する
HTML5ではCanvasという機能があり、高度な描画が可能です。
今まで、デザイナーがPhotoshopやIllustratorを利用して描いていたような描画が、ある程度HTML5のソースコードに書くことで可能になります。
ここでは、まず簡単なグラデーションの描画をやってみます。
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head>
<body>
<!-- canvas描画のために、canvasタグを使います -->
<canvas id="gradient_canvas" width="500" height="500"></canvas>
<script type="text/javascript">
// canvasを取得します
var gradient_canvas = document.getElementById("gradient_canvas");
// canvasのコンテキストを記述 2dとしておきます。3dが出てくるときのためにある引数ですが、
// 現時点ではまだ3dには対応していないみたいです。
var context = gradient_canvas.getContext("2d");
// 線形のグラデーションを描きます createLinearGradientの引数は順番に
// Canvas内のグラデーションのX軸の開始座標、Y軸の開始座標、X軸の終了座標、Y軸の終了座標、
var gradient = context.createLinearGradient(0,0,500,500);
//グラデーションの内容を指定。引数は順番に、開始位置、グラデーションの色
gradient.addColorStop(0, "#ffffff"); //白
gradient.addColorStop(0.5, "#ffff00"); //黄色
gradient.addColorStop(1, "#ff0000"); //赤
//コンテキストを、gradientで塗りつぶします
context.fillStyle = gradient;
//四角形を描画します。fillRectの引数は順番に
//Canvas内のX軸の開始座標、Y軸の開始座標、X軸の終了座標、Y軸の終了座標
context.fillRect(0,0,gradient_canvas.width,gradient_canvas.height);
//ななめに白から黄色、赤に変わるグラデーションの長方形になります
</script>
</body></html>
実際のサンプルはこちら HTML5が動作するブラウザで見てください。