캔버스 기초는 아래 글 참고
HTML Canvas(캔버스) 기초: 기본 사용 방법 & 샘플 예제 코드
# canvas 원 그리기: 방법 정리
1. path 시작 설정
이 설정을 해주어야, 새로운 선을 그릴 준비가 된다.(안 그러면 이전에 그린 선과 이어진다)
: ctx.beginPath()
2. 원 모양 설정
: ctx.arc(x, y, 반지름, 시작각도, 마지막각도)
* x, y는 원의 중심 좌표
* 시작각도: 0, 마지막각도: 2*Math.PI 로 설정하면 360도의 원이 그려진다.
3. 원 그리기
: ctx.stroke()
4. 원 색 채우기
1) 색 설정: ctx.fillStyle = "색상";
2) 색 채우기: ctx.fill();
# canvas 원 그리기: 샘플 예제 코드
원을 그리고 색까지 채우는 예제 코드이다.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<!-- HTML -->
<!-- 1. canvas 엘리먼트 선언 -->
<canvas id="myCanvas" width="400" height="300"></canvas>
<!-- Javascript -->
<script>
// 1. canvas 엘리먼트 취득
const canvas = document.getElementById('myCanvas');
// 2. 2d모드의 그리기 객체 취득
const ctx = canvas.getContext("2d");
// 3. path 그리기 시작 설정
ctx.beginPath();
// 4. 원 모양 설정
ctx.arc(100, 100, 50, 0, 2*Math.PI);
// 5. 그리기
ctx.stroke();
// 6. 원 내부 색 채우기
ctx.fillStyle = 'blue';
ctx.fill();
</script>
</body>
</html>
<결과물>
'개발(Development) > HTML Canvas(캔버스)' 카테고리의 다른 글
| HTML Canvas(캔버스): 이미지 그리기 방법 drawImage (0) | 2021.06.04 |
|---|---|
| HTML Canvas(캔버스): 그라데이션 gradient 색 설정 방법 (0) | 2021.06.03 |
| HTML Canvas(캔버스): 사각형 그리기 방법 (0) | 2021.06.03 |
| HTML Canvas(캔버스) 선 그리기 방법 총정리: 7가지 샘플 예제 코드 (0) | 2021.06.01 |
| HTML Canvas(캔버스) 기초: 기본 사용 방법 & 샘플 예제 코드 (0) | 2021.06.01 |
댓글