TIL-2024.04.19 - Canvas - 001

> Frontend/Canvas

TIL-2024.04.19 - Canvas - 001 - Canvas 기초

Janku 2024. 4. 20. 19:02

질문:

1. Canvas가 무엇이야 ?

Canvas:

정의:

- JavaScript와 HTML을 사용하여 그래픽을 그릴 수 있는 HTML 요소.

- Canvas는 그림을 그리고 그림을 조작하는 기능을 제공하며, Web App 에서 동적인 그래픽 및 애니메이션을 생성 가능한 도구

예제:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas 예제</title>
</head>
<body>
    <canvas id="myCanvas" width="300" height="300"></canvas>

    <script>
        // Canvas 요소 가져오기
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');

        // 원 그리기
        ctx.beginPath();
        ctx.arc(150, 150, 100, 0, 2 * Math.PI); // 중심 좌표 (150, 150), 반지름 100
        ctx.fillStyle = 'skyblue'; // 색상 지정
        ctx.fill(); // 내부를 색으로 채우기
        ctx.closePath();
    </script>
</body>
</html>

예제 결과:

실제 사용 예시:

... 생략 ...
<canvas ref="imgCanvas" id="imageCanvas" class="image" :width="canvasWidth" :height="canvasHeight"></canvas>
... 생략 ...

const fnDrawImageOnCanvas = img => {
  const ctx = imgCanvas.value.getContext("2d");

  const image = new Image();
  image.src = img?.fileUrl; // URL of the image

  image.onload = () => {
    ctx.drawImage(image, 0, 0, canvasWidth, canvasHeight);
  };
};

- 이런 방식으로 fileUrl을 가지고 canvas 에 그림을 그릴 수 있다.

답변:

1. Canvas가 무엇이야 ?

A: JavaScript와 HTML을 사용하여 그래픽을 그릴 수 있는 HTML 요소.