Canvas라는 함수를 사용하여 그림판을 만드는 작업을 하겠습니다.
const ctx = canvas.getContext(“2d”); >>> getContext를 통해 캔버스에서 2D를 가져옵니다.
캔버스에 너비 값, 높이 값, 테두리를 지정하면 정사각형 사각형(도화지)이 생성됩니다.
그러면 위에서 부르는 ctx 위에 그림을 그리거나 도화지에 그림을 그릴 수 있습니다.
ctx.rect(50, 50, 50, 50);
직사각형(너비, 높이, x축, y축)으로 생각하십시오. >> 직사각형
ctx, 즉 x 50과 y 50을 사용하여 캔버스에 너비가 50인 2D 직사각형을 만듭니다!!
ctx.rect(50, 50, 50, 50);
ctx.rect(100, 100, 50, 50);
ctx.rect(150, 150, 50, 50);
ctx.fill();
같은 크기의 사각형이 x, y축만 다르게 3개 생길 것이다.
마지막 ctx.fill();을 하게 되면 만든 사각형에 배경색이 입혀진다.이 방법으로 대각선 사각형을 만들고 setTimeout을 사용하여 애니메이션과 같은 효과를 만들 수 있습니다.
ctx.rect(50, 50, 50, 50);
ctx.rect(100, 100, 50, 50);
ctx.rect(150, 150, 50, 50);
ctx.fill();
ctx.beginPath() //위의 아이들과 다르게 새로 시작
ctx.rect(200, 200, 50, 50);
ctx.rect(250, 250, 50, 50);
ctx.fillStyle = "red"; //fill에 대한 색을 변경해줌.
setTimeout(()=> {ctx.fill()}, 1000);
색을 변경해주고 1초 뒤에 fill해줘라.