[React] Canvas

Canvas API는 JavaScript와 HTML canvas 엘리먼트를 통해 그래픽을 그리기위한 수단을 제공합니다. 무엇보다도 애니메이션, 게임 그래픽, 데이터 시각화, 사진 조작 및 실시간 비디오 처리를 위해 사용됩니다.

Canvas API는 주로 2D 그래픽에 중점을 두고 있습니다. WebGL API 또한 canvas 엘리먼트를 사용하며, 하드웨어 가속 2D 및 3D 그래픽을 그립니다.

1. Add the canvas and initialize the context

canvas를 추가하고 context를 초기화합니다. DOM에서는 캔버스 요소를 렌더링하고 캔버스의 컨텍스트를 초기화합니다. 다음의 코드에서는 useRef 및 effect 후크를 사용하여서 캔버스 요소를 관리했습니다.

또한 캔버스의 너비와 높이를 설정하고 추가 사용을 위해 컨텍스트를 초기화하는 것도 볼 수 있습니다.

import React, { useRef, useEffect } from 'react';
 
function App() {
  const canvas = useRef();
  let ctx = null;
 
  // initialize the canvas context
  useEffect(() => {
    // dynamically assign the width and height to canvas
    const canvasEle = canvas.current;
    canvasEle.width = canvasEle.clientWidth;
    canvasEle.height = canvasEle.clientHeight;
 
    // get context of the canvas
    ctx = canvasEle.getContext("2d");
  }, []);
 
  return (
    <div className="App">
      <h3>Draw a rectangle on Canvas - <a href="http://www.cluemediator.com" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h3>
      <canvas ref={canvas}></canvas>
    </div>
  );
}
 
export default App;

2. Function to write a text

리액트에서 캔버스 위에 글씨를 쓰기 위해서는 다음과 같은 코드를 추가합니다.

// write a text
const writeText = (info, style = {}) => {
  const { text, x, y } = info;
  const { fontSize = 20, fontFamily = 'Arial', color = 'black', textAlign = 'left', textBaseline = 'top' } = style;
 
  ctx.beginPath();
  ctx.font = fontSize + 'px ' + fontFamily;
  ctx.textAlign = textAlign;
  ctx.textBaseline = textBaseline;
  ctx.fillStyle = color;
  ctx.fillText(text, x, y);
  ctx.stroke();
}

위 코드에서는 정보와 스타일과 같은 두 가지 주요 매개변수를 전달하여 텍스트를 그리고 있습니다. text 인자와 함께 x와 y 포인트를 전달하였으며, 두 번째 인자로 색상, 글꼴 패밀리, 텍스트 정렬 및 텍스트 기준선을 전달하여 관리합니다. canvas에 텍스트를 쓰기 위해서 fillText() 방법을 사용하였습니다.

3. Write a text

다음의 방법을 통해서 텍스트를 그려낼 수 있숩니다!!!

useEffect(() => {
  writeText({ text: 'Clue Mediator!', x: 180, y: 70 });
 
  writeText({ text: 'Welcome to ', x: 180, y: 70 }, { textAlign: 'right' });
 
  writeText({ text: 'www.cluemediator.com', x: 180, y: 130 }, { fontSize: 30, color: 'green', textAlign: 'center' });
 
  writeText({ text: 'Like, Share and Subscribe...', x: 180, y: 200 }, { fontSize: 14, fontFamily: 'cursive', color: 'blue', textAlign: 'center' });
}, []);