티스토리 뷰

Develop/canvas

HTML5 Canvas

GuriZzang 2015. 6. 30. 01:53

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의 튜토리얼을 보실 수 있습니다.

guriZzang.com 스터디블로그


'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
HTML5 Canvas  (0) 2015.06.30
댓글
댓글쓰기 폼
공지사항
Total
51,684
Today
5
Yesterday
37
링크
«   2020/10   »
        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
글 보관함