마우스 (1) 썸네일형 리스트형 (canvas) 마우스로 사각형 여러개 그리기 (feat.forEach) JS나 React에서 canvas 태그를 활용하여 하나의 캔버스 태그에 여러개의 사각형을 그리는 방법을 설명하겠다. 마우스로 사각형을 그리는 주제를 검색하면 자료가 많이 있지만 한번 그린 사각형에 또 다른 사각형을 추가할 수 있는 방법을 설명한 자료는 찾기가 어려워서 공유하고자 한다. canvas에서 마우스로 사각형을 한번만 그리는 것을 안다는 가정하에 결론을 먼저 말하자면 '현재 내가 그리고 있는 rectagle의 정보를 useState를 활용하여 elements 변수에 배열 형태로 저장해주고 다음 사각형을 그릴 때 저장된 elements와 현재 그리고 있는 rectagle의 정보를 forEach로 순회하며 strokeRect 해주는 것이 포인트이다.' 아래는 마우스가 이동할 때 호출되는 drawing.. 이전 1 다음
