guriZzang.com에서 더 많은 html5, canvas의 튜토리얼을 보실 수 있습니다.
guriZzang.com 스터디블로그 바로가기
<canvas>
<canvas>는 HTML 요소 중 하나로서, 스크립트(보통은 자바스크립트)를 사용하여 그림을 그리는 데에 사용됩니다. 예를 들면, 그래프를 그리거나 사진을 합성하거나, 간단한(혹은 복잡할 수도 있는) 애니메이션을 만드는 데에 사용될 수 있습니다.
<canvas>는 Apple의 Mac OS X 대시보드(Dashboard)에 처음 나타났고, 이후 사파리 및 구글 크롬에 적용되었습니다. 파이어폭스 같은 게코(Gecko)를 기반으로 하는 브라우저도 이 요소를 지원합니다. <canvas> 요소는 HTML5로 알려진 WhatWG Web applications 1.0의 사양에 들어 있습니다.
<canvas> 요소를 사용하는 것이 어려운 일은 아니지만, HTML과 자바스크립트에 대한 기본 지식을 갖추고 있어야 합니다. 몇몇 오래된 브라우저는 <canvas> 요소를 지원하지 않지만, 최근 버전의 주요 브라우저들은 모두 지원하고 있습니다. 캔버스의 크기는 300px * 150px (너비 * 높이)가 초기 설정값이며, CSS height와 width 속성을 사용하여 바꿀 수 있습니다. 캔버스에 그림을 그리려면 자바스크립트 컨텍스트 오브젝트를 사용합니다.
guriZzang.com에서 더 많은 html5, canvas의 튜토리얼을 보실 수 있습니다.
'Develop > canvas' 카테고리의 다른 글
| quadraticCurveTo() - 2차 베지어 곡선 (0) | 2015.06.30 |
|---|---|
| arcs - 원 혹은 호 그리기 (0) | 2015.06.30 |
| arc() - canvas 원그리기 (0) | 2015.06.30 |
| fillrect 선으로 도형그리기 (0) | 2015.06.30 |
| .getContext() - canvas 기본사용 (0) | 2015.06.30 |