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>