HTML5 캔버스

  다른 뜻에 대해서는 캔버스 문서를 참조하십시오.

1 개요

HTML5 canvas

HTML5 캔버스

• 동적 그래픽 콘텐츠 영역
• 자바스크립트에서 캔버스의 2D 컨텍스트를 얻어 제어할 수 있다.

2 캔버스 기초 예제

html

Copy

<canvas id="my_canvas" width="300" height="300"></canvas>

<script>
var canvas = document.getElementById("my_canvas");
var context = canvas.getContext("2d");
context.fillStyle = "rgb(255,0,0)";
context.fillRect(0,0,200,200);
context.fillStyle = "rgba(0,0,255,0.5)";
context.fillRect(100,100,1000,1000);
</script>

→ 300x300 크기의 캔버스 생성

→ (0,0)위치에 200x200 크기의 빨간색 네모를 그린다.

→ (100,100)에 1000x1000 크기의 반투명 파란색 네모를 그린다.

여기서 알 수 있는 것.

• 캔버스 영역을 벗어나면 화면에 보이지 않는다. 1000x1000 파란색 네모를 그렸지만, 캔버스 영역까지만 보인다.
• 색상을 정의할 때 #00000 형식 외에 rgb와 rgba를 사용할 수 있다.

rgb는 빨강(red), 녹색(green), 파랑(blue)를 0~255까지 지정하여 사용한다.

rgba는 rgb에 투명도(alpha)가 추가되며 값의 범위는 0~1이다.

• 나중에 추가한 도형이 더 상위 레이어가 된다. 아래의 예제와 비교해보자.

3 변형 예제

위 예제를 다음과 같이 일부만 변형해보자.

html

Copy

<canvas id="my_canvas" width="300" height="300"></canvas>

<script>
var canvas = document.getElementById("my_canvas");
var context = canvas.getContext("2d");
context.fillStyle = "rgb(255,0,0)";
context.fillRect(0,0,200,200);
context.fillStyle = "rgb(0,0,255)";
context.fillRect(100,100,1000,1000);
</script>

→ 투명하지 않은 파란색 네모가 빨간색 네모보다 상위에 놓이게 되므로 빨간색 네모 일부를 가리게 된다.

4 브라우저 지원

엘리먼트
<canvas>	4.0	9.0	2.0	3.1	9.0

5 같이 보기

• 뷰포트
• HTML5 캔버스 getContext()
• HTML5 캔버스 fillStyle
• HTML5 캔버스 fillRect
• HTML5 캔버스 색상 지정 방법
• HTML5 캔버스 삼각형 그리기
• HTML5 캔버스 화면 채우기
• HTML Canvas 텍스트
• HTML5 기본 형태
• processing.js
• WebGL
• Quartz 2D
• HTML svg 튜토리얼
• SVG

6 참고

• http://www.html5canvastutorials.com/
• https://en.wikipedia.org/wiki/Canvas_element