java - キャンバスに単純なグリッドを描画しますか?

Question

Conway の Game Of Life を Java で作成しましたが、それをブラウザーで表示したいと考えています。Canvas について学びたかったのですが、2D グリッドを描画し、各セルを色で塗りつぶすにはどのような方法が望ましいでしょうか? ありがとう。

Answer 1

これで格子ができます。要素や何かの座標を配置または決定できるようになると便利だと思います。また、他のいくつかの便利なユースケースも考えられます。

var grid = function() {
    for (var i = 0; i < canvasWidth || i < canvasHeight; i += 100) { // 100 represents the width in pixels between each line of the grid
        // draw horizontal lines
        ctx.moveTo(i, 0);
        ctx.lineTo(i, canvasHeight);
        // draw vertical lines
        ctx.moveTo(0, i);
        ctx.lineTo(canvasWidth, i);
    }
    ctx.save();
        ctx.strokeStyle = 'hsla(200, 0%, 20%, 0.8)';
        ctx.stroke();
    ctx.restore();
};

// Call the function
grid()

これが役に立てば幸いです。あなたもやろうとしています。:)

編集:各グリッドの正方形を異なる色で塗りつぶそうとする場合、この関数は機能しません。または、少なくとも上記の関数と同様の方法で正方形を作成して塗りつぶす別の関数と組み合わせて使用​​ できますが、カットしますキャンバスの幅と高さの寸法に基づいて、幅と高さをオフにします。