캔버스에 간단한 격자 그리기?

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() 

호프가 도움이 되었으면하는 중입니다. :)

편집 : 각 격자 사각형을 다른 색으로 채울 경우이 기능은 작동하지 않거나 유사한 방식으로 사각형을 만들고 채우는 다른 기능과 함께 사용할 수 있습니다 위의 함수에 적용하지만 너비와 높이의 크기에 따라 너비와 높이를 잘라야합니다.