Canvas tutorial #1

※ 이 글은 예전 블로그에서 퍼왔으며 2020.3.1.에 작성된 글입니다.

※ 이 글은 해당사이트를 번역한 것입니다.

---

HTML5 캔버스 요소는 Javascript를 통해 렌더링 된다는 점을 제외 하면, <div> 나 <a>, <table> 과 유사한 HTML태그 이다.

​

HTML5 Canva를 활용하기 위해선 HTML태그 내부 어딘가에 <canvas>를 배치해두고, Javascript로 <canvas>에 접근하여 컨텍스트를 만든 다음 HTML5CanvasAPI를 사용하여 시각화를 그려야 한다.

​

Canvas의 구성 요소와 캔버스 환경의 차이점을 이해하는 것이 중요하다.

캔버스 요소는 HTML페이지에 포함된 실제 DOM노드다.

​

Canvas 컨텍스트는 Canvas 요소 내에서 그래픽을 렌더링 하는 데 사용할 수 있는 특성 및 방법이 포함된 개체 입니다. Context는 2d또는 WebGL(3d)일 수 있다.

​

각 Canvas요소에는 하나의 컨텍스트만 있을 수 있다.