HTML Canvas Javascript 기초

HTML Canvas Javascript 기초

Author : Jino Bae / Send Mail

도형과 애니메이션을 이용한 그래픽을 표현하는데 파이썬을 이용할지 HTML을 사용할지 고민했다. 하지만 나의 궁극적인 목표는 웹개발자이므로 캔버스를 사용하고자 하였다. 이곳을 참고하여 기본적인 사용법을 익혔다.

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Jin5 Develop Canvas</title>
    <style>
    	* { padding: 0; margin: 0; }
    	canvas { background: #eee; display: block; margin: 0 auto; }
    </style>
</head>
<body>

<canvas id="myCanvas" width="400" height="800"></canvas>

<script>
    // Code Here
</script>

</body>
</html>

아래에는 Code Here에 들어갈 스크립트만 작성할 예정이다. 먼저 캔버스를 자바스크립트에서 수정할 수 있도록 스크립트에서 다음과 같이 선언한다.

1
2
var canvas = document.getElementById("myCanvas");
var cts = canvas.getContext("2d");

이후 도형은 다음과 같이 표현할 수 있다.

  • 네모는 다음과 같이 표현
    1
    2
    3
    4
    5
    
    ctx.beginPath();
    ctx.rect(100, 100, 50, 50);
    ctx.fillStyle = "#F00";
    ctx.fill();
    ctx.closePath();
    
  • 원은 다음과 같이 표현
    1
    2
    3
    4
    5
    
    ctx.beginPath();
    ctx.arc(150, 200, 30, 0, Math.PI*2);
    ctx.fillStyle = "#0F0";
    ctx.fill();
    ctx.closePath();
    
  • fillStyle에는 다음과 같은 내용을 넣을 수 있다
    • #000
    • #000000
    • rgb(0,0,0)
    • rgba(0,0,0,.5)

또한 테두리에만 색상을 넣기 위한 방법은 다음과 같다

1
2
3
4
5
ctx.beginPath();
ctx.rect(200, 100, 50, 50);
ctx.strokeStyle = "#00F";
ctx.stroke();
ctx.closePath();

결과물

결과물


Animation

캔버스에 애니메이션을 삽입하기 위해서는 setInterval을 사용하여 함수를 지속적으로 계속 호출해 주어야 한다. draw 함수를 만들어서 0.01초마다 캔버스를 갱신할 것이다. 또한 캔버스를 갱신하면서 캔스안에 내용을 지워주지 않으면 이전 내용이 남아있을 수 있으므로 clearRect를 사용하여 캔버스의 내용을 정리해준다.

1
2
3
4
5
function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
}

setInterval(draw, 10);

이후 뒷배경을 채우는 네모와 리듬게임처럼 공간을 분할시킬 선을 추가했다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function draw_background() {
    ctx.beginPath();
    ctx.rect(0, 0, canvas.width, canvas.height)
    ctx.fillStyle = "#eee";
    ctx.fill();
    ctx.closePath();
}

function draw_lattice() {
    ctx.beginPath();
    for(var i=100; i<400; i+=100) {
        ctx.moveTo(i, 0);
        ctx.lineTo(i, canvas.height);
    }
    ctx.strokeStyle = "#ccc";
    ctx.stroke();
    ctx.closePath();
}

결과물

결과물


이제 정말 리듬게임처럼(리듬 게임 만들려던건 아니지만…) 노트가 위에서 아래로 떨어지도록 구현해보자.

1
2
3
4
5
6
7
8
9
10
11
12
13
var x = 0;
var y = 0;
var speed = 5;

function rhythm_box() {
    ctx.beginPath();
    ctx.rect(x, y, 100, 20)
    ctx.fillStyle = "#f00";
    ctx.fill();
    ctx.closePath();

    y += speed;
}

결과물

결과물

이렇게 간단하게 canvas의 사용법을 나열해 보았다. 이정도 알았으면 충분히 간단하게 뭐든 표현할 수 있을듯하다.

전체 소스코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

function draw_background() {
    ctx.beginPath();
    ctx.rect(0, 0, canvas.width, canvas.height)
    ctx.fillStyle = "#eee";
    ctx.fill();
    ctx.closePath();
}

function draw_lattice() {
    ctx.beginPath();
    for(var i=100; i<400; i+=100) {
        ctx.moveTo(i, 0);
        ctx.lineTo(i, canvas.height);
    }
    ctx.strokeStyle = "#ccc";
    ctx.stroke();
    ctx.closePath();
}

var x = 0;
var y = 0;
var speed = 5;

function rhythm_box() {
    ctx.beginPath();
    ctx.rect(x, y, 100, 20)
    ctx.fillStyle = "#f00";
    ctx.fill();
    ctx.closePath();

    y += speed;
}

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    draw_background();
    draw_lattice();
    rhythm_box();
}

setInterval(draw, 10);

Jino Bae
WRITTEN BY

Jino Bae

Digital is a purely man-made playground. That's why I like.
im@baejino.com


comments powered by Disqus