캔버스

Next/Image는 크게 로컬 이미지(정적 이미지)와 리모트 이미지(다이나믹 이미지)로 나뉜다. /public 폴더에 저장한 로컬 이미지는 빌드 타임에 import한 이미지 파일의 width, height를 자동으로 지정하고 base64로 인코딩한 이미지가 생성된다. 따라서 추가 작업 없이 블러 처리된 Placeholder를 사용할 수 있다.// public 폴더에 있는 me.png 파일을 사용하고 있다; 그 외 상황은 리모트 이미지로 구분한다. 이때 블러 처리된 Placeholder를 사용하려면 plaiceholder 같은 라이브러리를 사용하거나 캔버스 API를 이용해서 4×4 정도의 사이즈(보통 300바이트 미만)로 줄인 후 base64로 변환하는 작업이 필요하다. NextJS 공식 문서에선 10 ..

도형 사이즈 조정 메서드ctx.scale(x, y) : 도형 크기 확대/축소. 캔버스에서 1단위는 1픽셀. scale(2, 2)는 하나의 단위를 2픽셀로 확대(좌표 사이의 간격 증가).ctx.translate(x, y) : 캔버스의 원점 이동. 기본값은 왼쪽 좌상단 (0, 0).ctx.rotate(angle) : 도형을 라디안(angle) 단위만큼 시계 방향으로 회전. 항상 캔버스 원점이 회전의 중심.ctx.transform(scaleX, skewX, skewY, scaleY, translateX, translateY)scale(), rotate(), translate() 일괄 적용하는 메서드.이전 변형 결과값에 이어서 수행.초기 상태에서 transform(1.2, 0, 0, 1.2, -30, -30)을..