나를 제외한 천재들 블로그


- '그리기' 태그의 글 목록 -

그리기

    [JS] Canvas에서 가운데 정렬 텍스트 그리기

    [JS] Canvas에서 가운데 정렬 텍스트 그리기

    다양한 방법으로 가운데(중앙) 정렬시킨 텍스트(글자)를 Canvas에 그릴 수 있습니다. 첫 번째 코드 const cw = width / 2; const ch = height / 2; // 그리는 기준점을 글자의 가운데로 ctx.textAlign = "center" ctx.fillStyle = "#000"; ctx.fillText( text, cw, ch ); ctx.fill(); 글자를 그리기 전에 텍스트의 X 시작점을 가운데로 옮기는 속성을 적용시키면 간단하게 중앙 정렬시킬 수 있습니다. 두 번째 코드 const cw = width / 2; const ch = height / 2; // 그릴 텍스트의 넓이 구하기 const textWidth = ctx.measureText(text).width; ct..