canvas에 텍스트와 이미지 그리기

글꼴을 설정합니다: ctx.font = "bold 24px sans-serif". 다음과 같이 그립니다: ctx.fillText("Hello", x, y) 또는 ctx.strokeText("Hello", x, y). y 좌표는 텍스트 기준선이므로, 경계 상자 안에 텍스트를 올바르게 배치하려면 그 위에 글자 상승 높이를 더해야 합니다.

ctx.textAlign은 가로 정렬을 제어합니다: "left"(기본값), "center", "right". ctx.textBaseline은 y를 기준으로 한 세로 정렬을 제어합니다: "top", "middle", "alphabetic"(기본값), "bottom". 텍스트를 가운데에 배치하려면 두 속성을 각각 "center"와 "middle"로 설정하세요.

ctx.measureText("text")는 너비와 글꼴 측정 정보가 담긴 TextMetrics 객체를 반환합니다. 이를 사용하면 텍스트 위치를 동적으로 계산할 수 있습니다. 예를 들어 상자 안에서 텍스트를 가운데 정렬하거나, maxWidth에서 텍스트를 줄바꿈하거나, 데이터 지점 옆의 레이블을 오른쪽 정렬할 수 있습니다.

캔버스에는 텍스트 줄바꿈 기능이 내장되어 있지 않습니다. 단어 너비를 측정하고, maxWidth를 초과할 때까지 누적한 다음, lineHeight 간격으로 새 줄을 시작하도록 직접 구현해야 합니다. 이는 캔버스 렌더링 라이브러리에서 흔히 사용하는 유틸리티 함수입니다.

ctx.drawImage(image, dx, dy)는 HTMLImageElement, HTMLCanvasElement 또는 HTMLVideoElement를 (dx, dy) 위치에 그립니다. 그리기 전에 픽셀을 사용할 수 있도록 이미지를 먼저 로드하고 onload 처리기에서 그리세요.

ctx.drawImage(image, dx, dy, dw, dh)는 이미지를 dw × dh 크기에 맞게 조정합니다. 종횡비는 자동으로 유지되지 않으므로 크기를 직접 계산해야 합니다. 종횡비를 유지하려면 dw = img.width * scale; dh = img.height * scale과 같이 작성하세요.

인수가 9개인 drawImage는 다음과 같습니다: ctx.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh). 소스 직사각형 (sx, sy, sw, sh)은 이미지에서 잘라낼 영역을 지정하고, 대상 직사각형 (dx, dy, dw, dh)은 잘라낸 영역을 캔버스에 배치하고 크기를 조정합니다.

ctx.imageSmoothingEnabled = false는 이미지 크기를 조정할 때 쌍선형 보간을 비활성화합니다. 선명하고 부드럽게 처리되지 않은 크기 조정이 필요한 픽셀 아트에 사용하세요. 부드러운 크기 조정이 더 보기 좋은 사진 이미지에서는 기본값인 활성화 상태로 두세요.

캔버스를 drawImage의 소스로 전달하여 한 캔버스에 다른 캔버스를 렌더링할 수 있습니다. 이를 통해 오프스크린 렌더링이 가능합니다. 숨겨진 캔버스에 복잡한 합성 결과를 그린 다음, 각 프레임마다 해당 캔버스를 보이는 캔버스에 한 번의 작업으로 그립니다.

ctx.globalAlpha(0에서 1)는 이후에 그리는 모든 내용에 균일한 투명도를 적용합니다. ctx.globalCompositeOperation은 새로 그리는 내용이 기존 픽셀과 혼합되는 방식을 제어합니다: "source-over"(기본값), "multiply", "screen", "destination-out"(지우기) 등이 있습니다.

canvas.toDataURL("image/png")는 캔버스를 base64 PNG 데이터 URL로 내보냅니다. 사용자가 시작하는 다운로드에 사용할 수 있습니다. 앵커 요소를 만들고 href를 데이터 URL로, download 속성을 파일 이름으로 설정한 다음 프로그래밍 방식으로 클릭하세요.

캔버스 텍스트 렌더링에서는 배치에 ctx.font, fillText/strokeText, textAlign 및 textBaseline을 사용하고, 레이아웃 계산에는 measureText를 사용합니다. drawImage를 사용한 이미지 그리기는 크기 조정과 자르기를 지원하며, globalAlpha와 globalCompositeOperation은 혼합 방식을 제어합니다. toDataURL은 다운로드하거나 추가로 사용하기 위해 캔버스를 내보냅니다.