HTMLで行列（マトリックス）を使用してJSラジアルグラデーションを作成する方法

行列変換を使ったラジアルグラデーションとは

Canvasのコンテキストに対してスケール変換（行列変換）を適用することで、楕円形のラジアルグラデーションを作成できます。通常のcreateRadialGradient()メソッドは正円のグラデーションしか描画できませんが、コンテキストの変換マトリックスを操作することで、縦横比の異なるグラデーションも自由に表現可能になります。

実装コード

以下のコードを実行すると、行列を使ったJSラジアルグラデーションを作成できます。

var canvas1 = document.getElementById("canvas"); // 対象のキャンバスを特定するための変数
var ctx1 = canvas.getContext("2d"); // コンテキストが2Dであることを指定

var gradient1 = ctx1.createRadialGradient(
  100 / horizontalScale, 100 / verticalScale, 100,
  100 / horizontalScale, 100 / verticalScale, 0
); // 指定したキャンバスコンテキストでグラデーションを作成

gradient1.addColorStop(1, "green"); // グラデーションに緑を追加
gradient1.addColorStop(0, "red");   // グラデーションに赤を追加

ctx1.scale(horizontalScale, verticalScale); // コンテキストの行列を水平・垂直スケールに応じて縮小
ctx1.fillStyle = gradient;                  // グラデーションを描画
ctx1.fillRect(0, 0, 100 / horizontalScale, 100 / verticalScale); // スケールに合わせて矩形を伸縮
ctx1.setTransform(0, 1, 1, 0, 1, 1);        // コンテキストの行列をリセット

CSSの設定

キャンバスには背景色を設定しておくと、グラデーションが視覚的に確認しやすくなります。

canvas {
  background-color: purple; /* キャンバスの背景色を紫に設定 */
}

HTML要素

<canvas id="canvas" width="300" height="300"></canvas>

コードのポイント解説

• createRadialGradient()：始点円と終点円それぞれの中心座標と半径を指定して、ラジアルグラデーションを生成します。
• addColorStop()：第1引数にはグラデーション上の位置（0〜1）、第2引数には色を指定します。
• scale()：コンテキストの変換マトリックスを拡大・縮小することで、楕円形状のグラデーションを実現します。
• setTransform()：変換マトリックスをリセットし、以降の描画処理へ影響が残らないようにします。

このように、スケール変換とラジアルグラデーションを組み合わせることで、柔軟な表現力のあるグラフィック描画が可能になります。ぜひ実際にコードを実行して、動きを確認してみてください。