HTML5 canvas 요소와 사각형 그리기

HTML5 canvas 요소와 사각형 그리기

 

캔버스(canvas) 개요

캔버스(canvas)는 브라우저에서 그림을 그리기 위하여 지정한 영역을 의미합니다.
브라우저에서 그림을 표현하는 것 뿐만 아니라 여러 가지 효과를 부여하고, 텍스트를 표현하고, 간단한 애니메이션까지 표현 가능합니다.

브라우저에 그림을 그리기 위해서는 canvas 요소를 사용하여 그림을 그릴 영역을 지정하고, 실제 그림을 그리는 작업은 자바스크립트를 사용합니다.

 

canvas 요소

canvas 요소는 그림을 그릴 영역을 지정합니다.

형식

<canvas  id = "아이디"  width = "너비"  height = "높이"> 지원 불가능한 브라우저에서 표현할 이미지나 텍스트 </canvas>

예제

<canvas  id = "canvas"  width = "700"  height = "700"> <img  src = "img.jpg"  width = "700"  height = "700"> </canvas>

 

그리기 컨텍스트 생성

형식

var  변수1 = document.getElementById('아이디'); var  변수2 = 변수1.getContext('2d');

예제

 

사각형 그리기

사각형을 그리기 위해서는 시작점인 x좌표, y 좌표, 너비, 높이를 나타내는 4가지 값이 필요합니다.

사각형 그리기 관련 메서드

메서드	설명
strokeRect (x, y, width, height)	테두리만 있는 사각형을 그려줌
fillRect (x, y, width, height)	색이 채워진 사각형을 그려줌
clearRect (x, y, width, height)	특정 영역을 지워줌

형식

context.strokeRect(x, y, 너비, 높이) context.fillRect(x, y, 너비, 높이) context.clearRect(x, y, 너비, 높이)

예제

context.strokeRect(30, 30, 120, 120) /* 좌표 (30, 30) 을 시작점으로 너비 120, 높이 120 의 테두리만 있는 사각형을 그려줌 */ context.fillRect(130, 130, 120, 120) /* 좌표 (130, 130) 을 시작점으로 너비 120, 높이 120 의 색이 채워진 사각형을 그려줌 */ context.clearRect(90, 90, 120, 120) /* 좌표 (90, 90) 을 시작점으로 너비 120, 높이 120 의 사각형 영역을 지워줌 */

 

사각형 그리기 실습 프로그램