-
TIL-2024.04.19 - Canvas - 001 - Canvas 기초> Frontend/Canvas 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 요소.
Canvas 사용 라이브러리 '> Frontend > Canvas' 카테고리의 다른 글
TIL-2024.04.23 - Canvas - 005 - Canvas 애니메이션 & 이벤트 (0) 2024.04.23 TIL-2024.04.22 - Canvas - 004 - Canvas 텍스트 & 이미지 (0) 2024.04.22 TIL-2024.04.21 - Canvas - 003 - Canvas 곡선 그리기 (0) 2024.04.21 TIL-2024.04.20 - Canvas - 002 - Canvas 그리기 (1) 2024.04.21