WEB
HTML5의 <canvas> 요소는 웹 페이지에 동적 그래픽을 그릴 수 있는 강력한 도구임. 자바스크립트를 사용하여 2D 또는 3D 그래픽을 렌더링하고, 애니메이션을 구현하며, 사용자와 상호작용할 수 있음.
HTML5 캔버스의 사용법
HTML5 캔버스는 <canvas> 태그를 사용하여 웹 페이지에 삽입할 수 있음. 캔버스는 기본적으로 비어 있으며, 자바스크립트를 통해 그래픽을 그릴 수 있는 영역을 제공
(1) 기본 캔버스 설정
HTML 문서에 <canvas> 요소를 추가하여 캔버스를 설정. 캔버스의 너비와 높이는 속성으로 지정할 수 있으며, 이를 통해 캔버스의 크기를 정의함
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="500" height="400"></canvas>
<script src="script.js"></script>
</body>
</html>id 속성을 사용하여 캔버스를 식별할 수 있으며, width와 height 속성으로 캔버스의 크기를 설정함
캔버스 제어하기
자바스크립트를 사용하여 캔버스에 그래픽을 그리려면 몇 가지 단계를 거쳐야함.
(1) 그림이 그려질 캔버스 영역 얻어내기
자바스크립트로 캔버스 엘리먼트를 참조하려면, getElementById 메소드를 사용하여 해당 엘리먼트를 선택
const canvas = document.getElementById('myCanvas');(2) 그리기 작업을 위한 그래픽 2D 콘텍스트 얻어내기
캔버스에 그래픽을 그리려면, getContext('2d') 메소드를 사용하여 2D 콘텍스트를 얻어야 . 이 콘텍스트를 통해 다양한 그리기 작업을 수행할 수 있음
const ctx = canvas.getContext('2d');ctx는 캔버스에 그리기 작업을 수행할 수 있는 객체임
도형, 문자열, 이미지 그리기
자바스크립트를 사용하여 캔버스에 다양한 그래픽을 그릴 수 있음.
(1) 도형 그리기
캔버스에서 도형을 그리기 위해서는 ctx 객체의 메소드를 사용함
https://developer.mozilla.org/ko/docs/Web/API/Canvas_API/Tutorial/Basic_usage
캔버스(Canvas) 기본 사용법 - Web API | MDN
<canvas> HTML 엘리먼트를 살펴보는 것으로 이 튜토리얼을 시작해 보겠습니다. 이 페이지의 끝에서 캔버스 2D 컨텍스트를 설정하는 방법을 알게되고, 여러분의 브라우저에서 첫 번째 예제를 그리게
developer.mozilla.org
참고
'javaboiii의 Web > Web 요약정리(HTML5&CSS3그리고JS)' 카테고리의 다른 글
| Web - 11) 프로젝트 구조 설계 (0) | 2024.09.01 |
|---|---|
| Web - 10) 캔버스를 사용한 애니메이션 (1) | 2024.09.01 |
| Web - 7) JavaScript 함수와 객체 (0) | 2024.08.29 |
| Web - 6) JavaScript 제어문 (0) | 2024.08.28 |
| Web - 5) JavaScript의 개요 (0) | 2024.08.26 |