HTML5で円形（放射状）グラデーションを描く方法【createRadialGradient()徹底解説】
HTML5のCanvas APIでは、createRadialGradient()メソッドを使うことで、円形（放射状）グラデーションを簡単に描画できます。このメソッドは、引数で指定された2つの円に沿って円錐状に展開される放射状グラデーションを表すCanvasGradientオブジェクトを返します。
createRadialGradient()の基本構文
最初の3つの引数で、中心座標 (x0, y0) と半径 r0 を持つ「開始円」を定義し、続く3つの引数で、中心座標 (x1, y1) と半径 r1 を持つ「終了円」を定義します。
createRadialGradient(x0, y0, r0, x1, y1, r1)パラメータの一覧
createRadialGradient()メソッドの各パラメータは以下の通りです。
| 番号 | パラメータと説明 |
|---|---|
| 1 | x0 … グラデーションの開始点のX座標 |
| 2 | y0 … グラデーションの開始点のY座標 |
| 3 | r0 … 開始円の半径 |
| 4 | x1 … グラデーションの終了点のX座標 |
| 5 | y1 … グラデーションの終了点のY座標 |
| 6 | r1 … 終了円の半径 |
実装サンプル：HTML5で放射状グラデーションを描く
以下のコードを実行すると、HTML5のCanvas上に円形（放射状）グラデーションを描画できます。
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Radial 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.createRadialGradient(75, 50, 5, 90, 60, 100);
linegrd.addColorStop(0, "#FFFFFF");
linegrd.addColorStop(1, "#66CC00");
ctxt.fillStyle = linegrd;
ctxt.fillRect(20, 10, 200, 150);
</script>
</body>
</html>コードの解説とポイント
サンプルコードでは、まずgetContext("2d")でキャンバスの描画コンテキストを取得し、createRadialGradient(75, 50, 5, 90, 60, 100)によってグラデーションオブジェクトを生成しています。開始円は小さな半径(5)で内側に、終了円は大きな半径(100)で外側に設定されているため、中心から外へ広がるグラデーションになります。
addColorStop()メソッドでは、グラデーションの色の変化を指定します。第1引数はオフセット位置（0.0〜1.0）、第2引数はCSSカラーです。この例では、白（#FFFFFF）から緑（#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(): 定義したパスを実際に画面へ描画するサンプルコード以下のコ