在畫布上畫一個簡單的網格？

Question

我已經編寫了康威的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() 

希望這會有所幫助，並且是你試圖做太多的東西。 :)

編輯：如果您要用不同的顏色填充每個網格正方形，那麼此功能將不起作用，或者至少可以與另一個以類似方式創建並填充正方形的函數組合使用到上面的函數，但根據畫布寬度和高度的尺寸關閉寬度和高度。