티스토리 뷰

[개발]프로그래밍/html5

[html5] arc - canvas에서 원 그리기

좋은 블로그 2021. 2. 26. 10:52
1. 개념
arc - canvas에서 원 그리기
arc는 canvas에서 원을 그릴 수 있도록 해주는 메소드임
arc(x,y,반지름,시작 각도 , 끝 각도 , 방향 설정)

속성

설명

x

원의 중심 x좌표

y

원의 중심 y좌표

반지름

원에 있는 반지름의 길이

시작각도

3시를 기준으로 시계방향으로 시작 각도 설정(원주율로 지정)

끝 각도

3시를 기준으로 시계방향으로 끝 각도 설정(원주율로 지정)

방향 설정

원을 그릴 때 시계방향으로 그릴지, 반시계방향으로 그릴지 설정
false:시계 방향(기본값),true: 반시계 방향
2. 태그
arc
html5 코드
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<! DOCTYPE html>
<html lang = "kr" >
<head>
<meta charset = "utf-8" >
<title> 키보드와 하루 </title>
</head>
<body>
<canvas id = "tcanvas" width = "300" height = "200" style =' border : 1px solid #000 '; > </canvas>
<script>
var canvas = document. getElementById ( "tcanvas" );
var context = canvas. getContext ( "2d" );
context. beginPath (); //빈경로 새롭게 시작
context. strokeStyle = "red" ; //선 색을 red로 지정
1
//(100,100) 중심 , 반지름 20 , 3시 기준 , 90˚ 각도 , 시계방향
context. arc (100 , 100 , 20 , 0 , Math.PI /2 , false );
context. stroke (); //context의 경로에 있는 도형 그리기
context. beginPath ();
context. strokeStyle = "blue" ;
2
//(100,100) 중심 , 반지름 40 , 3시 기준 , 180˚ 각도 , 반시계방향
context. arc (100 , 100 , 40 , 0 , Math.PI , true );
context. stroke ();
context. beginPath ();
context. strokeStyle = "black" ;
3
//(100,100) 중심 , 반지름 60 , 3시 기준 , 180˚ 각도 , 시계방향
context. arc (100 , 100 , 60 , 0 , Math.PI , false );
context. stroke ();
context. beginPath ();
context. strokeStyle = "green" ;
4
//(100,100) 중심 , 반지름 80 , 3시 기준 , 270˚ 각도 , 반시계방향
context. arc (100 , 100 , 60 , 0 , 1.5 * Math.PI , true );
context. stroke ();
context. beginPath ();
context. strokeStyle = "gray" ;
5
//(100,100) 중심 , 반지름 95 , 3시 기준 , 270˚ 각도 , 시계방향
context. arc (100 , 100 , 95 , 0 , 1.5 * Math.PI , false );
context. stroke ();
</script>
</body>
</html>
결과 화면
코드 설명
1
context. arc (100,100,20,0, Math.PI /2, false
이해를 위해서 모든 원의 중심은 100,100으로 설정하고 시작각도는 0으로 해서 3시부터 시작하는 것으로 했습니다.
먼저는 20이라는 숫자는 반지름을 애기합니다.
즉 100,100에서 반지름이 20으로 해서 원을 그리겠다고 선언을 하는 것입니다.
끝 각도는 원주율/2로 해서 90도로 설정하였습니다.
그리는 방향은 시계 방향으로 했으니 아래쪽(↙)으로 내려가면서 원이 그려지게 되는 것입니다.
2
context. arc (100,100,40,0, Math.PI , true
반지름은 30입니다.20이라는 숫자는 반지름을 애기합니다.
그리고 시작각도는 0으로 하고 끝 각도는 원주율이 Math.PI로 해서 180도로 설정을 하였습니다.
이것은 true라는 방향을 설정을 하였으므로 반 시계방향으로 돌아가서 원을 그리게 됩니다.
3
context. arc (100,100,60,0, Math.PI , false
3번은 2번과의 이해를 이해서 방향만 시계방향으로 바꿨습니다.
반지름이 같을 경우에는 색깔이 겹치기에 60으로 키웠고 3번을 보면 아래쪽으로 그려지는 것을 확인하실 수 있습니다.
4
context. arc (100,100,80,0, 1.5 * Math.PI , true
반지름이 80이고 1.5배로 원주율을 주었기 때문에 270도로 반시계방향으로 설정해 주고 있습니다.
5
context. arc (100,100,95,0, 1.5 * Math.PI , false
4번과 이해를 주기 위해서 반지름이 95이고 방향만 시계방향으로 주었습니다.
저작자표시

'[개발]프로그래밍 > html5' 카테고리의 다른 글

[html5] strokeText,fillText - canvas에 텍스트 그리기  (0) 2021.03.03
[html5] rect,strokeRect - canvas에 사각형 그리기  (0) 2021.03.02
[html5] canvas - 선 ,도형 그리기 및 채우기  (0) 2021.02.25
[html5] canvas - 웹 페이지에 그래픽 표현  (0) 2021.02.24
[html5] video - 웹 페이지에서 비디오 재생  (0) 2021.02.23
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday