www.w3schools.com 에 있는 내용을 번역하겠습니다.
<canvas>엘리먼트는 웹페이지에서 그래픽을 그리기 위해 사용됩니다.
Canvas가 무엇일까?
HTML5의 <canvas>엘리먼트는 단지 그래픽들을 위한 컨테이너입니다.
당신은 그래픽을 그리기 위해 자바스크립트를 사용해야 합니다.
캔바스는 높이와 넚이 속성이 있는 그리기가 가능한 지역이라고 HTML코드에서 정의됩니다.
캔버스는 선분들, 사각형들, 원, 문자(Characters) 그리고 이미지를 추가하는 메서드가 있습니다.
캔바스는 왠만한 메이저급 브라우저에서는 다 지원됩니다.
IE8만 빼고.... MS 각성하시오.
1. 캔바스 만들기
캔바스는 <canvas>엘리먼트로 정의합니다.
id와 height 속성을 <canvas>엘리먼트에서 정의합니다.
<canvas id = "myCanvas" width="200" height="100"></canvas>
2. 자바스크립트로 그리기
<canvas>엘리먼트는 그림을 그리는 어떤 속성도 자체적으로 가지고 있지 않습니다.
모든 그리기는 자바스크립트 내에서 행하여지는 것이지요.
아래의 예제를 실행해 볼까요?
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
// 자바스크립트는 <canvas>엘리먼트를 찾기 위해 id를 사용합니다.
// 그리고 콘텍스트 객체를 생성합니다. getContext("2D")는 선분, 박스, 원, 문자, 이미지등을 그릴수 있는 많은 메서드를 가지고 있는빌트인 HTML5 오브젝트입니다.
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d");
// 다음의 두 줄은 빨간 사각형을 그립니다.
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
</body>
</html>
이런 사각형이 만들어 집니다.
3. 좌표 이해하기
위의 예제에서 fillRect 속성은 (0, 0, 150, 75)를 가지고 있습니다.
이것은 좌즉상단의 (0,0)지점에서 시작해서 150×75 사각형을 캔버스에 그리라는 것을 말합니다.
canvas의 X Y좌표는 캔바스에서 그리는데 있어서 위치를 나타내는데 사용합니다.
플래시와 좌표체계는 같습니다.
'WEB_TECH > HTML5' 카테고리의 다른 글
| 단말기의 기종을 알아내는 구문 (0) | 2013.06.13 |
|---|---|
| canvas animation 예제입니다. (0) | 2013.05.24 |
| HTML5 사운드 플레이어 만들기1 (0) | 2013.05.23 |
| Geolocation API (0) | 2012.10.25 |
| Google Maps Javascript API V3 (0) | 2012.10.25 |
| 새로운 HTML5 Javascript API (0) | 2012.10.22 |
| <canvas>에 4가지 간단 그리기 예제 (0) | 2012.10.22 |
| HTML5에서 새로 사용된 엘리먼드들 (0) | 2012.10.22 |
| html5에서 사운드 사용하기 (0) | 2012.08.09 |