Coding Planet
Canvas 태그, JavaScript 내장함수, 예시 코드 본문
반응형
| <canvas> 태그
<canvas>는 HTML5에서 도입된 요소로, 그래픽스를 그리기 위한 영역을 제공한다. JavaScript와 함께 사용되어 동적으로 2D 또는 3D 그래픽스를 생성할 수 있다. 이 태그는 게임, 그래프, 애니메이션 등 다양한 시각적 컨텐츠를 구현하는 데 사용되는데 그래프를 통해 기능을 살펴보고자 한다.
| <canvas> 기본 사용법
- getContext()는 HTML <canvas> 요소의 내장 메서드이다. 이 메서드 사용시 렌더링 컨텍스트와 그것의 그리기 함수를 가져올 수 있다. 가장 일반적으로 사용되는 컨택스트는 "2d"이다.
- fillRect(x, y, width, height)함수를 통해 사각형을 그린다
- 예시 코드를 실행시 2차원의 사각형이 나타난다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(50, 25, 100, 50);
</script>
</body>
</html>
| <canvas> 주요 내장함수
| getContext() | 캔버스의 렌더링 컨텍스트를 가져옴. |
| fillRect(x, y, width, height) | 캔버스에 사각형을 그림. |
| strokeRect(x, y, width, height) | 사각형의 윤곽선을 그림. |
| clearRect(x, y, width, height) | 캔버스의 특정 부분을 지움. |
| beginPath() | 새로운 경로를 시작함. |
| moveTo(x, y) | 펜을 캔버스의 지정된 위치로 이동함. |
| lineTo(x, y) | 현재 위치에서 지정된 위치까지 선을 그림. |
| arc(x, y, radius, startAngle, endAngle, anticlockwise) | 원이나 원호를 그림. |
| fill() | 현재 그리기 경로를 채움. |
| stroke() | 현재 경로를 윤곽선으로 그림. |
| closePath() | 현재 경로를 닫음. |
| fillStyle | 도형 내부를 채울 색상이나 스타일을 설정함. |
| strokeStyle | 도형의 윤곽선 색상이나 스타일을 설정함. |
| lineWidth | 선의 너비를 설정함. |
| font | 텍스트의 스타일과 크기를 설정함. |
| fillText(text, x, y, [maxWidth]) | 지정된 위치에 텍스트를 채워 그림. |
| strokeText(text, x, y, [maxWidth]) | 지정된 위치에 텍스트의 윤곽선을 그림. |
반응형
'front' 카테고리의 다른 글
| [react] Node.js와 OpenSSL의 호환성 문제 (0) | 2024.06.25 |
|---|---|
| [게시판] pre 태그 글에 자동 줄 바꾸기 - pre, Whitespace, 브라우저별로 (0) | 2024.03.13 |
| Promise 이해하기 (1) | 2024.01.05 |
| [javascript/jQuery] 드롭다운 메뉴 구현하기 (0) | 2023.11.13 |
| CSS 전처리기 SASS 총정리 - 사용예시 포함 (0) | 2023.10.24 |
'front' Related Articles
more
Comments