Canvas tutorial

  • 리비전 슬러그: Canvas_tutorial
  • 리비전 제목: Canvas tutorial
  • 리비전 아이디: 64155
  • 제작일시:
  • 만든이: Sebuls
  • 현재 리비전인가요? 아니오
  • 댓글

리비전 내용

공사중
이 입문서는 2005년 9월 26일부터 쓰여지고 있습니다.

<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> 요소를 사용하는 것이 매우 어려운 것은 아니지만 HTMLJavaScript에 대한 기초적인 이해는 필요로 합니다.

시작하기 전에, <canvas>가 모든 최근의 브라우저에서 지원되는 것은 아니므로 모든 예제를 실행해보려면 Firefox 1.5나 최신의 Gecko기반 브라우저 혹은 최신버전의 Safari 브라우저가 필요할 것입니다.

입문서 목차

참고

{{template.Next("Canvas tutorial:Basic usage")}}

{{ wiki.languages( { "en": "en/Canvas_tutorial", "fr": "fr/Tutoriel_canvas", "ja": "ja/Canvas_tutorial", "pl": "pl/Przewodnik_po_canvas", "zh-cn": "cn/Canvas_tutorial" } ) }}

리비전 소스

<div class="callout-box"><b>공사중</b><br>
<small>이 입문서는 2005년 9월 26일부터 쓰여지고 있습니다.</small></div><img align="right" src="File:ko/Media_Gallery/Canvas_tut_examples.jpg">
<p><code>&lt;canvas&gt;</code>는 스크립트(보통 <a href="ko/JavaScript">JavaScript</a>)를 이용해 그림을 그리는 새로운 <a href="ko/HTML">HTML</a> 요소입니다. 그래프를 그리거나 사진합성 혹은 간단한(그리고 <a href="ko/A_Basic_RayCaster">단순하지 않은 것</a>도) 애니메이션을 제작하는데 쓰일 수도 있습니다. 오른쪽의 이미지는 우리가 이 입문서에서 살펴볼 <code>&lt;canvas&gt;</code> 구현의 몇가지 예입니다.
</p><p><code>&lt;canvas&gt;</code> 는 Apple에서 <a class="external" href="http://www.apple.com/macosx/features/dashboard/">Mac OS X 대시보드</a>에 사용하면서 가장 먼저 알려졌고 이후 Safari 웹브라우저에 구현되었습니다. Firefox 1.5와 같은 <a href="ko/Gecko">Gecko</a> 1.8 기반의 브라우저들도 이 새로운 요소를 지원하고 있습니다. <code>&lt;canvas&gt;</code> 요소는 HTML 5로 알려진 <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">WhatWG Web applications 1.0</a> 명세의 일부입니다.
</p><p>이 입문서에서는 HTML 페이지에서 <code>&lt;canvas&gt;</code> 요소를 어떻게 구현하는 방법에 대해서 기술할 것입니다. 제공되는 예제는 &lt;canvas&gt;로 할 수 있는 것에 대한 명확한 이해를 도우며, 바로 사용할 수도 있습니다.
</p>
<h3 name=".EC.8B.9C.EC.9E.91.ED.95.98.EA.B8.B0.EC.97.90_.EC.95.9E.EC.84.9C"> 시작하기에 앞서 </h3>
<p><code>&lt;canvas&gt;</code> 요소를 사용하는 것이 매우 어려운 것은 아니지만 <a href="ko/HTML">HTML</a>과 <a href="ko/JavaScript">JavaScript</a>에 대한 기초적인 이해는 필요로 합니다.
</p><p>시작하기 전에, <code>&lt;canvas&gt;</code>가 모든 최근의 브라우저에서 지원되는 것은 아니므로 모든 예제를 실행해보려면 Firefox 1.5나 최신의 Gecko기반 브라우저 혹은 최신버전의 Safari 브라우저가 필요할 것입니다.
</p>
<h3 name=".EC.9E.85.EB.AC.B8.EC.84.9C_.EB.AA.A9.EC.B0.A8"> 입문서 목차 </h3>
<ul><li> <a href="ko/Canvas_tutorial/Basic_usage">기본 사용법</a>
</li><li> <a href="ko/Canvas_tutorial/Drawing_shapes">모양 사용</a>
</li><li> <a href="ko/Canvas_tutorial/Using_images">이미지 사용</a>
</li><li> <a href="ko/Canvas_tutorial/Applying_styles_and_colors">스타일과 색상 적용</a>
</li><li> <a href="ko/Canvas_tutorial/Transformations">변형</a>
</li><li> <a href="ko/Canvas_tutorial/Compositing">합성</a>
</li><li> <a href="ko/Canvas_tutorial/Basic_animations">간단한 애니메이션</a>
</li></ul>
<h3 name=".EC.B0.B8.EA.B3.A0"> 참고 </h3>
<ul><li> <a href="Special:Tags?tag=Canvas_examples&amp;language=ko">Canvas 예제</a>
</li><li> <a href="Special:Tags?tag=HTML:Canvas&amp;language=ko">Canvas에 관한 글과 다른 리소스</a>
</li></ul>
<p>{{template.Next("Canvas tutorial:Basic usage")}}
</p>{{ wiki.languages( { "en": "en/Canvas_tutorial", "fr": "fr/Tutoriel_canvas", "ja": "ja/Canvas_tutorial", "pl": "pl/Przewodnik_po_canvas", "zh-cn": "cn/Canvas_tutorial" } ) }}
Revert to this revision