<canvas>는 스크립트(보통 JavaScript)를 이용해 그림을 그리는 새로운 HTML 요소입니다. 그래프를 그리거나 사진합성 혹은 간단한(그리고 단순하지 않은 것도) 애니메이션을 제작하는데 쓰일 수도 있습니다. 오른쪽의 이미지는 우리가 이 입문서에서 살펴볼 <canvas> 구현의 몇가지 예입니다.
<canvas> 는 Apple에서 Mac OS X 대시보드에 사용하면서 가장 먼저 알려졌고 이후 Safari 웹브라우저에 구현되었습니다. Firefox 1.5와 같은 Gecko 1.8 기반의 브라우저들도 이 새로운 요소를 지원하고 있습니다. <canvas> 요소는 HTML 5로 알려진 WhatWG Web applications 1.0 명세의 일부입니다.
이 입문서에서는 HTML 페이지에서 <canvas> 요소를 어떻게 구현하는 방법에 대해서 기술할 것입니다. 제공되는 예제는 <canvas>로 할 수 있는 것에 대한 명확한 이해를 도우며, 바로 사용할 수도 있습니다.
시작하기에 앞서
<canvas> 요소를 사용하는 것이 매우 어려운 것은 아니지만 HTML과 JavaScript에 대한 기초적인 이해는 필요로 합니다.
시작하기 전에, <canvas>가 모든 최근의 브라우저에서 지원되는 것은 아니므로 모든 예제를 실행해보려면 Firefox 1.5, 최신의 Gecko 기반 브라우저, Opera 9 혹은 최신버전의 Safari 브라우저가 필요합니다.
입문서 목차
참고
- Canvas 주제 페이지
- Canvas로 그림 그리기
- Canvas 예제
- HTML5 Tutorial
- Drawing Text Using a Canvas
- Adding Text to Canvas
- Canvas Demos - Games, applications, tools and tutorials
- Canvas Drawing and Animation Application
- interactive canvas tutorial
- Canvas Cheat Sheet with all attributes and methods
- Adobe Illustrator to Canvas plug-in
- HTML5CanvasTutorials
- How to draw a point with the Canvas API
- How to draw N grade Bézier curves with the Canvas API
- 31 days of canvas tutorials
- W3C Standard