[CANVAS - 체스] 1. 세팅 및 체스판 그리기

canvas에 예전부터 관심이 갔는데 뭐 좀 하다가 시들해지고 그랬었다.

 

이번에는 아주 천천히 하더라도 조금씩 계속 뭔가 하는게 좋을 것 같아서 해보려함

 

내가 하고싶은거는 체스 만들기.

 

2D로 그려진 체스판에서 체스하는거다.

 

1. 체스판은 가로세로 8x8. 한칸당 10px로 잡고 800 x 800의 캔버스를 만들었다.

 

2. 각 칸에 색칠을 하려고 한다. 아래 사진과 같은 느낌.

 

ctx.fillRect(0, 0, 10, 10)를 이용해서 10px 10px의 정사각형을 그리려고 했는데 이모양이다.

예전에도 비슷한 문제가 있었는데 기억이 안나서 다시 찾아야한다.

토스트에서 이런 글을 올려주었다.

https://ui.toast.com/weekly-pick/ko_20210526

삽질하기 싫으면 꼭 읽어봐야 할 Canvas 트러블 슈팅

 

적용했는데 갑자기 박스가 엄청나게 작아짐.. 또 찾아본다.

다시 봤더니 10px이 아니라 100px로 해야하는구나..

 

이제 정상적으로 나온다. for문을 이용해서 일단 체스판 모양대로 그려주자.

 

손가는대로 코드를 짜다보니 이따위로 나오고 있다.

이거 해결되면 다음은 체스말 그림 가져와서 채워주는것이다.

 

어찌저찌 색 변경까지 하여 완성

다음글은 체스말 이미지 불러와서 배치하는 것이다.