Canvas 기초 한번사용해보자

javascript/javascript 심화지식

Canvas 기초 한번사용해보자

honey.kikiki 2022. 2. 5. 00:09

728x90

HTML Canvas

오늘은 HTML 표준으로 채택되어 요즈음에는 대부분의 브라우저에서 지원하는 캔버스에 대해 살펴보도록 하겠습니다 :)
제가 Canvas 공부하게 된 이유는 바로 웹에서 자유로운 GUI(그래픽 유저 인터페이스)를 지원하는 기술이기도 하기 때문입니다.

canvas 기초 사용법

html 문서에 canvas 엘리먼트를 선언한다.
canvas 엘리먼트에 id 속성을 설정한다.
canvas 태그 내부에 width, height를 설정한다.
canvas 내장 '그리기 객체'를 취득한다.
그리기 객체에 '채우기색, 선색, 그림자, 그라데이션' 등을 설정한다.
그리기 객체를 통해 선, 사각형, 원, 텍스트 등을 그린다.
자바스크립트를 통해 다양한 효과를 구현한다.

캔버스 사이즈 설정

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>canvas</title>
    <style>
      body {
        margin: 0;
      }
      .canvas {
        width: 500px;
        height: 300px;
        background-color: #eee;
      }
    </style>
  </head>
  <body>
    <h1>캔버스 사이즈 설정</h1>
    <canvas class="canvas" width="500" height="300"></canvas>
    <canvas class="canvas canvas2" width="1000" height="600"></canvas>
    <script>
      const canvas = document.querySelector(".canvas");
      const canvas2 = document.querySelector(".canvas2");
      const context = canvas.getContext("2d");
      const context2 = canvas2.getContext("2d");

      context.arc(100, 100, 50, 0, Math.PI * 2, false);
      context2.arc(100, 100, 50, 0, Math.PI * 2, false);
      context.fill();
      context2.fill();
      console.log(Math.PI);
    </script>
  </body>
</html>

결과

content 사이즈 위치 설정

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>context 사이즈 위치 설정</title>
    <style>
      body {
        margin: 0;
      }
      .canvas {
        background-color: #eee;
      }
    </style>
  </head>
  <body>
    <h1>context 사이즈 위치 설정</h1>
    <canvas class="canvas" width="600" height="400"></canvas>

    <script>
      const canvas = document.querySelector(".canvas");
      const context = canvas.getContext("2d");

      context.fillRect(50, 50, 100, 100);
      context.fillStyle = "red";
      context.fillRect(0, 0, 100, 100);
      context.clearRect(50, 50, 50, 50);
      context.strokeStyle = "red";
      context.strokeRect(150, 150, 50, 50);
    </script>
  </body>
</html>

결과

기본적으로 제공하는 canvas의 기능 정리

const canvas = document.getElementById("number"); //id로 canvas element에 접근
const context = canvas.getContext("2d"); //2d 그래픽을 그릴 수 있는 메서드를 지닌 HTML5 오브젝트
const x = 32; //원점 x 좌표
const y = 32; //원점 y 좌표

const radius = 30; //반지름
const startAngle = 0; //0도
const endAngle = Math.PI * 2; //360도

context.fillStyle = "rgb(0,0,0)"; //채우기 색 설정
context.beginPath(); //새로운 경로 생성, 경로 생성 후 그리기 명령들은 경로를 구성하고 만드는데 사용
context.arc(x, y, radius, startAngle, endAngle); //x,y위치에 원점을 두고, radius 반지름을 가지고, startAngle에서 시작하여 endAngle에서 끝나며 주어진 방향(옵션 기본값은 시계방향)으로 호 그림
context.fill(); //경로의 내부를 채워서 내부가 채워진 도형을 그린다. 열린도형은 자동으로 닫히므로 closePath()호출 필요 X

context.strokeStyle = "rgb(255,255,255)"; //윤곽선의 색 설정
context.lineWidth = 3; //윤곽선의 두께
context.beginPath(); //새로운 경로 생성
context.arc(x, y, radius, startAngle, endAngle); //원 생성
context.stroke(); //윤곽선을 이용하여 형 그림

context.fillStyle = "rgb(255,255,255)"; //채우기 색 설정
context.font = "32px sans-serif"; //문자 폰트 크기, 글씨체
context.textAlign = "center"; //문자 정렬
context.textBaseline = "middle"; //베이스 라인 정렬 설정
context.fillText("1", x, y); //주어진 x,y 위치에 주어진 "1" 텍스트를 채움, 최대폭 maxwidth 옵션값