CLOSE SEARCH
POSTS TAGGED WITH: Canvas

Canvas on HTML5 – Text

텍스트를 출력하는 예제

 

Canvas 에서는 속이 채워진 텍스트를 출력하거나 외곽선 텍스트를 출력할 수도 있다. 그리고 이전에 설정된 fillStyle이나 strokeStyle의 영향을 받는다.

텍스트 정렬에 사용할 수 있는 값들은 아래와 같다.

  • textAlign : left / start, center, right / end
  • textBaseline : top, middle, bottom, hanging, alphabetic, ideographic

그리고 maxWidth 속성을 지정하면 전체 텍스트가 설정한 너비내에서 축소/확대되어 출력된다.

Canvas on HTML5 – Shadow Effect & Transform

Canvas에서 도형이나 선과 같은 그리기 개체에 그림자 효과를 추가할 수 있다. 그림자의 위치, 색상, 블러효과를 설정할 수 있다.

 

또한, 그래픽 컨텍스트의 변환 기능을 이용해서 그리기 개체들의 좌표변환, 확대/축소, 회전 등의 작업을 수행할 수 있다.

Canvas on HTML5 – canvas 선언 및 기본적인 그리기 사용

canvas 선언

canvas DOM 객체 생성

그리기 컨텍스트 생성

 

그리기 컨텍스트의 상태 저장과 복원

  • save() : 현재 그리기 컨텍스트의 상태를 스택구조에 저장한다. 저장되는 항목은 아래와 같다.
    • fillStyle
    • strokeStyle
    • globalAlpha
    • shadowOffsetX, shadowOffsetY
    • shadowColor
    • shadowBlur
    • lineWidth
    • lineCap, lineJoin
    • miterLimit
    • globalCompositeOperation
    • font
    • textAlign, textBaseline
  • restore() : 최근에 저장된 상태로 복원한다.

 

전체소스