웹 그래픽

정적인 이미지는 <img> 태그를 사용하거나 HTML 엘리먼트에 CSS의 background-image 속성을 이용하여 보여줄 수 있지만 도형을 동적으로 그리거나 그려진 도형을 제어해야 하는 경우 다른 방법들을 사용해야 한다.

 

CANVAS란

 

• IE9 이상 지원
• HTML5의 CANVAS는 자바스크립트를 이용해 원하는 2D 그래픽을 무엇이든 만들 수 있다.
• Raster 방식이기 때문에 Pixel 단위로 컨트롤이 가능하다.
  (Raster 방식 : 이미지의 모양과 색을 색상 정보가 담긴 픽셀로 표현하는 형태)
• DOM이 없고 픽셀로만 컨트롤 되기 때문에 한번 그림이 그려지게 되면 브라우저에서 잊히게 된다.
• HTML5 캔버스는 자바스크립트로 처리할 수 있는 즉시 모드 비트맵 영역이다.
  - 즉시 모드 (immediate mode)
    : 캔버스가 화면 위에 픽셀을 그리는 한 가지 방법으로 자바스크립트 캔버스 API로 코드를 만들면 HTML5 캔버스가 프레임마다 비트맵 화면을 다시 그린다.
• 캔버스 프레임을 그리기 전에 화면 디스플레이 설정을 잘 해놓아야 원하는 픽셀을 제대로 그릴 수 있다.