캔버스(Canvas) 다루기

fillRect

html

<canvas id='myCanvas'></canvas>

js

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

html 에서 canvas 테그를 생성 후 js에서 getContext("2d") 를 사용하면 캔버스를 이용할 준비가 끝난다. 매우 쉽다.

// fillRect(x, y, width, height)
ctx.fillRect(20, 20, 150, 100);

상기와 같은 코드를 이용하여 사각형을 만들어 보자. 검은색 사각형 박스가 디스플레이 된다.

ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);

fillStyle을 이용하여 색상을 채울수도 있다.

See the Pen javascript 풍선도움말 by younghyeong ryu (@wangta69) on CodePen.

clearRect

clearRect를 이용하여 특정 부분을 지우기도 가능하다.

// clearRect(x, y, width, height)
ctx.clearRect(30, 30, 150, 100);

See the Pen javascript Canvas - clearRect by younghyeong ryu (@wangta69) on CodePen.

fillText

fillText를 이용하여 글자도 넣을 수가 있다.

// ctx.fillText(text, x, y, [maxWidth]);
ctx.fillText("Welcome to Canvas World!", 10, 150);

폰트의 속성도 변경가능하다.

ctx.font = "italic 40px Georgia";
ctx.fillText("Welcome to Canvas World!", 10, 150);

폰트에 색상도 넣을 수 있다.

ctx.fillStyle = "red";
ctx.fillText("Welcome to Canvas World!", 10, 150);

See the Pen javascript Canvas - clearRect by younghyeong ryu (@wangta69) on CodePen.

여기서 우리는 다 출력되지 않은 글자를 볼 수 있다. 이것은 canvas의 사이즈가 크지 않기 때문이다. css를 이용하여 canvas크기를 늘려주다.