[HTML5] CANVAS

CANVAS란

(http://www.w3.org/TR/html5/the-canvas-element.html#the-canvas-element)
웹페이지에서 그래픽(2D, 3D)을 자유롭게 그릴 수 있는 영역입니다.

최신 모던 브라우저에서 동작하나, 인터넷익스플로러(IE)의 버전 8 이하는 동작하지 않습니다.

 

CANVAS 사용방법

 

<canvas id="mycanvas" width="600" height="300"> 캔버스를 사용할 수 없습니다. <img src="example.jpg"> </canvas> <script> //canvas DOM 객체를 생성 var canvas = document.getElementById('mycanvas'); //그리기 context 생성 var context = canvas.getContext('2d'); </script>

 
좌표지정 : 캔버스의 왼쪽 위 시작점이 좌표 (0, 0)이 되고, 가로가 x 좌표, 세로가 y 좌표로 표시됩니다.

 
 

발표자료

HTML5 Canvas

View more presentations from Mk Yoon.

 

CANVAS 예제

CANVAS 예제들을 모아 보았습니다. 
선, 면, 도형 그리기에서부터 시작하여 그림판, 시계애니메이션까지 있습니다.

http://mkyoon.tomeii.com/study/canvas