HTML5で線形グラデーションを描画するには？createLinearGradient()の使い方を解説
HTML5で線形グラデーションを描画する方法
HTML5のCanvas APIでは、createLinearGradient()メソッドを使うことで、指定した2点間に沿って色が滑らかに変化する線形グラデーションを作成できます。このメソッドはCanvasGradientオブジェクトを返し、引数で指定された開始点と終了点を結ぶ直線に沿って塗りつぶしを行います。
createLinearGradient(x0, y0, x1, y1)
パラメータの詳細
createLinearGradient()メソッドに渡す4つのパラメータは以下のとおりです。
| No. | パラメータと説明 |
|---|---|
| 1 | x0 グラデーション開始点のx座標 |
| 2 | y0 グラデーション開始点のy座標 |
| 3 | x1 グラデーション終了点のx座標 |
| 4 | y1 グラデーション終了点のy座標 |
なお、グラデーションに実際の色を設定するには、返されたCanvasGradientオブジェクトに対してaddColorStop()メソッドを使用します。第1引数にはオフセット位置（0.0〜1.0）、第2引数にはCSSカラー値を指定します。
サンプルコード
以下のコードを実行すると、HTML5での線形グラデーションの描画方法を実際に確認できます。
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Linear Gradient</title>
</head>
<body>
<canvas id="newCanvas" width="450" height="250" style="border:1px
solid #d3d3d3;"></canvas>
<script>
var c = document.getElementById("newCanvas");
var ctxt = c.getContext("2d");
var linegrd = ctxt.createLinearGradient(0, 0, 170, 0);
linegrd.addColorStop(0.5, "#E44D26");
linegrd.addColorStop(1, "#66CC00");
ctxt.fillStyle = linegrd;
ctxt.fillRect(50, 80, 300, 100);
</script>
</body>
</html>
このサンプルでは、左上の座標(0, 0)から右方向の座標(170, 0)へ向かう線形グラデーションを生成しています。位置0.5にHTML5ロゴでおなじみのオレンジ系カラー「#E44D26」、位置1.0に緑色の「#66CC00」を設定し、それをfillStyleに適用した上で、fillRect()により矩形を描画しています。実行結果として、左側からオレンジへ、そして徐々に緑へと変化する美しいグラデーションの長方形が表示されます。
-
HTML5のarc()メソッドで円を描く方法をわかりやすく解説
HTML5では、<canvas>要素とarc()メソッドを組み合わせることで、簡単に円を描くことができます。完全な円を描きたい場合は、開始角度を「0」、終了角度を「2 * Math.PI」に指定するのがポイントです。 arc()メソッドのパラメータ一覧 arc()メソッドには、以下の6つのパラメータを渡します。 No.パラメータ説明 1x円の中心のx座標 2y円の中心のy座標 3r円の半径 4startingAngle描画開始の角度（ラジアン単位） 5endingAngle描画終了の角度（ラジアン単位） 6counterclockwise（true / false）反時計回りに
-
HTML5のlineTo()メソッドで線を描画する方法
HTML5のlineTo()メソッドで線を描画する方法HTMLで線を描画するには、canvas要素を使用します。canvas上に線を引く際に活躍するのがlineTo()メソッドです。このメソッドはx座標とy座標の2つのパラメータを受け取り、指定した位置までの直線を定義します。lineTo()メソッドは単独では機能せず、以下のメソッドと組み合わせて使用するのが基本の流れです。beginPath(): 新しいパスの作成を開始するmoveTo(): 線の始点となる座標を指定するlineTo(): 線の終点となる座標を指定するstroke(): 定義したパスを実際に画面へ描画するサンプルコード以下のコ