Canvas 캔버스

hzn·2022년 11월 22일

canvas 캔버스

HTML & CSS

목록 보기

9/10

Canvas 캔버스

HTML의 <canvas> 태그와 Javascript 사용
다양한 그래픽 요소를 만들 수 있다. (단순한 도형부터 데이터 시각화, 애니메이션, 웹 게임 등)

캔버스 사용법

1. canvas 태그 작성 (id 지정)

캔버스는 요소를 DOM으로 조작하는 방식으로 작동된다.
따라서 요소를 선택할 때 사용할 id를 작성해주는 것이 좋다.

<canvas id="canvas"></canvas>

2. 요소 선택 & 요소 컨텍스트 가져오기

자바스크립트로 요소 선택하고 요소의 컨텍스트(렌더링 될 대상) 가져오기

const canvas = document.querySelector("#canvas");
const ctx = canvas.getContext('2d')

3. 캔버스 크기 설정

너비와 높이를 설정
설정해주지 않으면 기본값 300픽셀 * 150픽셀로 설정됨

1) 태그 속성으로 설정하는 방법

width, height 속성으로 설정
어떤 단위를 써넣든 픽셀로 인식된다.

// 500픽셀 * 500픽셀
<canvas id="canvas" width="500" height="500"></canvas>

// vw, vh를 전달했지만 50픽셀 * 40픽셀로 설정된다.
<canvas id="canvas" width="50vw" height="40vh"></canvas>

2) DOM으로 설정하는 방법

유동적인 값도 설정할 수 있다. (캔버스의 크기가 고정되어 있지 않은 경우 사용하기 좋다)
픽셀 외에 원하는 단위로 값을 명시할 수 있다.

// 픽셀 외에 vw, vh 등의 단위도 가능
canvas.width = 50vw; 
canvas.height = 40vh;
  
// 화면 크기에 맞춰서 설정해줄 수도 있다.
canvas.width = window.innerWidth; 
canvas.height = window.innerHeight;

4. 그리기

색칠된 사각형 그리기

1) 사각형 칠할 색상 정하기
2) fillRect 메소드 이용해 사각형 그려주기

ctx.fillStyle = 'blue'
ctx.fillRext = (10, 10, 100, 50) //순서대로 x좌표, y좌표, 가로길이, 세로길이

선으로 된 사각형 그리기

1) lineWidth(선의 굵기), strokeStyle(선의 색상) 설정하기
2) strokeRect 메소드를 이용해 사각형 그려주기

ctx.lineWidth = 5;
ctx.strokeStyle = "black";
ctx.strokeRect(10, 10, 100, 50)

사각형으로 지우기

ctx.clearRect( 20, 20, 80, 30)

5. 클릭 이벤트 만들기

1) 캔버스에서의 클릭 위치 구하기

클릭 이벤트 일어날 때의 캔버스에서의 마우스 위치
= 전체 화면에서의 마우스의 위치 - 전체 화면에서의 캔버스의 위치

전체 화면에서의 마우스의 위치
X좌표 : event.clientX
Y좌표 : event.clientY
전체 화면에서의 캔버스의 위치
X좌표 : ctx.canvas.offsetLeft 혹은 event.offsetX
Y좌표 : ctx.canvas.offsetTop 혹은 event.offsetY

👉🏽 캔버스에서의 클릭 위치
X좌표 : event.clientX - ctx.canvas.offsetLeft
Y좌표 : event.clientY - ctx.canvas.offsetTop

2) onClick 이벤트 만들기

x, y를 그대로 전달하면 해당 좌표부터 사각형이 시작된다. (클릭한 지점이 왼쪽 모서리가 됨)
👉🏽 클릭한 위치를 사각형의 정중앙이 되게 하려면
가로, 세로의 1/2 만큼 각각 좌표(x, y)에서 빼준다.

canvas.onclick = function (event) {
    // 캔버스에서의 좌표 변수에 저장
	const x = event.clientX - ctx.canvas.offsetLeft
	const y = event.clientY - ctx.canvas.offsetTop

    // 클릭할 때마다 사각형 그리기. 클릭한 지점이 사각형의 정중앙
	ctx.fillRect(x - 15, y - 15, 30, 30);
}

React에서 캔버스 사용하기

1. canvas 요소 지정 (useRef 사용)

import { useRef } from 'react';

const Canvas = () => {
  const canvasRef = useRef(null); // 캔버스 가져옴
...
  return (
    <div>
      <canvas ref={canvasRef} /> // useRef 사용해 캔버스 요소 지정
    </div>
  );
};

2. 캔버스 크기 설정

useEffect를 사용해 렌더링 될 때 캔버스 그려지게 설정
의존성 배열을 빈 배열로 둬서 렌더링 시 한 번만 그려지게 설정.

import { useRef, useEffect } from 'react'; // useEffect 가져오기

 useEffect(() => {
    const canvas = canvasRef.current; // 실제 캔버스
    canvas.width = window.innerWidth; // 캔버스 크기 지정
    canvas.height = 700;
 ...
 }, []); // 렌더링 시 한 번만 실행

3. 사각형 등 요소 그리기

요소 하나 그릴 때마다 각 요소 따로 선언해준다.

useEffect(() => {
    const canvas = canvasRef.current; // 실제 캔버스
    canvas.width = window.innerWidth; // 캔버스 크기 지정
    canvas.height = 700;

    // 사각형 1
    const context = canvas.getContext('2d'); // 요소 컨텍스트(렌더링 될 대상)  선언
    context.fillStyle = '#efd5cb';
    context.fillRect(50, 20, 600, 150);

    // 사각형 2
    const context2 = canvas.getContext('2d');
    context2.lineWidth = 10;
    context2.strokeStyle = '#6666e2';
    context2.strokeRect(200, 100, 600, 400);
  }, []);

4. 클릭 이벤트 생성하기

 useEffect(() => {
    const canvas = canvasRef.current; // 실제 캔버스
    canvas.width = window.innerWidth; // 캔버스 크기 지정
    canvas.height = 700;

   // 클릭 시 생기는 사각형
    const context3 = canvas.getContext('2d');
    canvas.onclick = function (event) {
      const x = event.clientX - context3.canvas.offsetLeft;
      const y = event.clientY - context3.canvas.offsetTop;
      context3.fillStyle = '#4aaf9c';
      context3.fillRect(x - 15, y - 15, 30, 30);
    };
  }, []);

🔥 전체 코드

import { useRef, useEffect } from 'react';

const Canvas = () => {
  const canvasRef = useRef(null); // 캔버스 가져옴

  useEffect(() => {
    const canvas = canvasRef.current; // 실제 캔버스
    canvas.width = window.innerWidth; // 캔버스 크기 지정
    canvas.height = 700;

    // 사각형 1
    const context = canvas.getContext('2d'); // 요소 컨텍스트(렌더링 될 대상)  선언
    context.fillStyle = '#efd5cb';
    context.fillRect(50, 20, 600, 150);

    // 사각형 2
    const context2 = canvas.getContext('2d');
    context2.lineWidth = 10;
    context2.strokeStyle = '#6666e2';
    context2.strokeRect(200, 100, 600, 400);

    // 클릭 시 생기는 사각형
    const context3 = canvas.getContext('2d');
    canvas.onclick = function (event) {
      const x = event.clientX - context3.canvas.offsetLeft;
      const y = event.clientY - context3.canvas.offsetTop;
      context3.fillStyle = '#4aaf9c';
      context3.fillRect(x - 15, y - 15, 30, 30);
    };
  }, []);

  return (
    <div>
      <canvas ref={canvasRef} />
    </div>
  );
};

export default Canvas;