frontendhtml5

Canvas 기본 설정 및 사용해보기

canvas, html5, react
Views: 776

시작하기

HTML5에서 부터 등장한 새로운 기능인 canvas기능을 살펴보겠습니다.
HTML canvas요소는 웹 페이지에 그래픽을 그리는 용도로 사용됩니다.
canvas에 그래픽을 그리기 위해서는 Javascript를 사용해야합니다.
canvas에는 Path, Rect, Circle, Text, Image 등을 추가하는 여러 가지 방법이 있습니다.

캔버스 그리기 전 기본설정

vscode를 사용한다면 html에서 웹서버를 구동할 수 있게 해주는 live server 패키지를 설치해줍니다. 이후 폴더에서 Go Live라는 버튼을 클릭하면 웹서버로 구동됩니다. 이 live server를 사용한 이유는 <script type="module" src="./App.js"></script> 이부분에서 type module을 불러오기 위해서 입니다.

벤버스 기본 설정

이제 캔버스를 작성해보도록 하겠습니다.

index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
        <title></title>
        <link rel="stylesheet" href="./style.css">
    </head>
    <body>
        <script type="module" src="./App.js"></script>
    </body>
</html>
stylesheet.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
* {
    outline: 0;
    margin: 0;
    padding: 0;
}

html {
    width: 100%;
    height: 100%;
}

body {
    width: 100%;
    height: 100%;
    background-color: #fff;
}

canvas {
    width: 100%;
    height: 100%;
}

html과 css설정이 완료 되었다면 본격적인 canvas를 설정하겠습니다.

App.js
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
class App {
  constructor() {
    this.canvas = document.createElement("canvas");
    document.body.appendChild(this.canvas);
    this.ctx = this.canvas.getContext("2d");

    this.pixelRatio = window.devicePixelRatio > 1 ? 2 : 1;

    window.addEventListener("resize", this.resize.bind(this), false);
    this.resize();

    window.requestAnimationFrame(this.animate.bind(this));
  }

  resize() {
    this.stageWidth = document.body.clientWidth;
    this.stageHeight = document.body.clientHeight;

    this.canvas.width = this.stageWidth * this.pixelRatio;
    this.canvas.height = this.stageHeight * this.pixelRatio;
    this.ctx.scale(this.pixelRatio, this.pixelRatio);
  }

  animate() {
    window.requestAnimationFrame(this.animate.bind(this));
    this.ctx.clearRect(0, 0, this.stageWidth, this.stageHeight);
  }
}

window.onload = () => {
  new App();
};

다음과 같은 코드를 작성했습니다. 이 코드의 의미는 다음과 같습니다.

  • this.canvas = document.createElement("canvas");: 캔버스 엘리먼트 생성.

  • document.body.appendChild(this.canvas);: body태그 내부 하단에 캔버스 엘리먼트 주입.

  • this.ctx = this.canvas.getContext("2d");: 캔버스 2d 컨택스트 가져오기 (실제로 그려지는 요소입니다).

  • this.pixelRatio = window.devicePixelRatio > 1 ? 2 : 1;: 현재 표시 장치의 물리적 픽셀과 CSS 픽셀의 비율을 반환.

  • window.requestAnimationFrame(this.animate.bind(this));: 애니메이션이 구현되는 부분입니다.

사각형 그리기

사각형을 그리는 방법으로 크게 두가지로 볼수 있습니다.
첫번재는 rect로 그리는 방법, 두번째는 fillRect메소드를 이용하는 방법입니다.
두가지 모두 사용해보도록 하겠습니다.

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
class App {
  constructor() {
    this.canvas = document.createElement("canvas");
    document.body.appendChild(this.canvas);
    this.ctx = this.canvas.getContext("2d");

    this.pixelRatio = window.devicePixelRatio > 1 ? 2 : 1;

    window.addEventListener("resize", this.resize.bind(this), false);
    this.resize();
    window.requestAnimationFrame(this.animate.bind(this));
    
  }
  resize(){
    this.stageWidth = document.body.clientWidth;
    this.stageHeight = document.body.clientHeight;

    this.canvas.width = this.stageWidth * this.pixelRatio;
    this.canvas.height = this.stageHeight * this.pixelRatio;
    this.ctx.scale(this.pixelRatio, this.pixelRatio);
  }

  animate(){
    window.requestAnimationFrame(this.animate.bind(this));
    this.ctx.clearRect(0, 0, this.stageWidth, this.stageHeight);
    this.draw();
  }

  draw(){
    this.ctx.beginPath();
    this.ctx.fillStyle = "red";
    this.ctx.rect(50, 50, 300, 200);
    this.ctx.fill();
    this.ctx.closePath();
  }
}
window.onload = () => {
  new App();
};

rect로 그려본 결과입니다.
rect

다음으로 fillRect를 사용해보겠습니다.

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
45
class App {
  constructor() {
    this.canvas = document.createElement("canvas");
    document.body.appendChild(this.canvas);
    this.ctx = this.canvas.getContext("2d");

    this.pixelRatio = window.devicePixelRatio > 1 ? 2 : 1;

    window.addEventListener("resize", this.resize.bind(this), false);
    this.resize();
    window.requestAnimationFrame(this.animate.bind(this));
  }
  resize() {
    this.stageWidth = document.body.clientWidth;
    this.stageHeight = document.body.clientHeight;

    this.canvas.width = this.stageWidth * this.pixelRatio;
    this.canvas.height = this.stageHeight * this.pixelRatio;
    this.ctx.scale(this.pixelRatio, this.pixelRatio);
  }

  animate() {
    window.requestAnimationFrame(this.animate.bind(this));
    this.ctx.clearRect(0, 0, this.stageWidth, this.stageHeight);
    this.draw();
  }

  draw() {
    // Rect
    this.ctx.beginPath();
    this.ctx.fillStyle = "red";
    this.ctx.rect(50, 50, 300, 200);
    this.ctx.fill();
    this.ctx.closePath();

    // fillRect
    this.ctx.beginPath();
    this.ctx.fillStyle = "blue";
    this.ctx.fillRect(80, 80, 200, 200);
    this.ctx.closePath();
  }
}
window.onload = () => {
  new App();
};

fillRect로 그려본 결과입니다.
fillRect

rect는 영역을 잡아주고 fill()을 통해서 내부의 색을 채워주는 방법입니다.
fillRect는 그러한 과정을 한번헤 해결해주는 메소드입니다.

이와같은 방법으로 canvas를 통해서 그래픽을 이용한 도형이나 효과를 줄 수 있습니다.
canvas를 통해서 웹으로 구현할 수 없는 한계가 없어지는듯 합니다.

이외의 다른 도형을 그리는 방법은 다음 웹사이트에서 찾아볼수 있습니다.

Share