HTML5 Canvasでランダムな色の正方形を敷き詰めた円を描く方法

HTML5 Canvasでランダムな色の正方形を敷き詰めた円を描く方法

ブラウザ上で、円の内部をそれぞれ異なる色の小さな正方形で埋めて描画したい場面は意外と多くあります。HTML5のCanvas APIを使えば、専用の画像処理ライブラリを追加しなくても、短いJavaScriptコードだけでこの表現を実現できます。

基本のアプローチは3ステップ

• ステップ1： キャンバス（例：200×200）全体に、ランダムな色の正方形を順番に描画していく
• ステップ2： コンポジットモード（合成モード）をdestination-inに変更する
• ステップ3： その上に円形を描画し、円の外側のピクセルを切り抜く

それでは、実際のコードを見てみましょう。

var canvas = document.getElementById('canvas'),  // canvas要素を取得
    ctx = canvas.getContext('2d'),               // 2Dコンテキストを取得
    x, y = 0,                                    // 座標の初期化
    diamet = canvas.width,
    radius = diamet * 0.6;

ctx.translate(0.6, 0.6); // 原点をわずかにずらし、ピクセルをシャープに描画

for (; y < diamet; y++) {            // x/y方向のグリッドを走査
  for (x = 0; x < diamet; x++) {
    ctx.fillStyle = getRndColor();   // ランダムな色を設定
    ctx.fillRect(x, y, 2, 2);        // 2×2の正方形を描画
  }
}

// ---- 円形を作成 ----
// これから描く図形の外側にあるピクセルを削除する
ctx.globalCompositeOperation = 'destination-in';
ctx.arc(radius, radius, radius, 0, 2 * Math.PI);
ctx.fill();

// ---- 合成モードを元に戻す ----
ctx.globalCompositeOperation = 'source-over';

// ランダムなRGBカラーを生成する関数
function getRndColor() {
  var r = 255 * Math.random() | 0,
      g = 255 * Math.random() | 0,
      b = 255 * Math.random() | 0;
  return 'rgb(' + r + ',' + g + ',' + b + ')';
}

コードのポイント解説

1. ランダムな色の生成（getRndColor関数）
赤・緑・青の各成分をMath.random()で0〜255の範囲の乱数として取得し、CSSのrgb()形式の文字列に組み立てて返します。| 0というビット演算を行うことで小数点以下が切り捨てられ、整数値になります。

2. translate()による微調整
ctx.translate(0.6, 0.6)で描画の原点をわずかにずらすことで、輪郭がぼやけるのを防ぎ、ピクセルをよりシャープに表示できます。

3. destination-inによる円形への切り抜き
globalCompositeOperationを'destination-in'に設定すると、「すでに描かれている内容のうち、これから描く図形と重なる部分だけを残す」という合成ルールになります。ここで完全な円を重ねて描くことで、円の外側のランダムな正方形がすべて消え、目的の「ランダムな色の正方形で満たされた円」だけが残ります。

4. 合成モードのリセットを忘れずに
最後に'source-over'（デフォルトの合成モード）へ戻しておきましょう。これを怠ると、その後のCanvasへの描画に意図しない影響が出る可能性があります。

応用のヒント

fillRect()の第3・第4引数を変更すれば正方形のサイズを調整でき、ループの刻み幅を変えればピクセルの密度をコントロールできます。ドット絵風のアバター生成やモザイク風の装飾、ジェネラティブアートなど、さまざまなクリエイティブな表現に応用できる便利なテクニックです。