キャンバスにシンプルなグリッドを描く？

Question

私はConwayのGame Of Life Javaを書いたので、ブラウザに表示したいと思います。キャンバスを学びたかったので、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() 

これは役立ちますし、あなたもやろうとしています。 :)

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