먼저 부채꼴 모양을 띄워보도록 하겠습니다.
popup.html의 head 태그 안에 script를 추가해줍니다.
<!doctype html>
<html>
<head>
<script src="script.js"> </script>
<meta charset="utf-8">
</head>
<body>
<h2 style="text-align : center"> Time Timer </h2>
<canvas id="myCanvas" width="300" height="300"></canvas>
</body>
</html>
다음으로 script.js파일을 만들고 아래 코드를 넣어줍니다.
window.onload=draw;
function draw(){
var ctx=document.getElementById('myCanvas').getContext('2d');
ctx.beginPath();
ctx.arc(150,150,100,0,(Math.PI/180)*360, true);
// ctx.arc(x,y, 반지름, 시작각도, 종료각도, 그리는 방향)
// true = 반시계, false 시계
ctx.fillStyle = "rgb(255,0,0)";
ctx.fill();
ctx.stroke();
ctx.closePath();
// 바탕 원
ctx.beginPath();
ctx.moveTo(150,150);
ctx.arc(150,150,100,(Math.PI/180)*270,(Math.PI/180)*180, false);
// 경과한 시간이 하얀색으로 나와야 하기때문에 시계 방향으로 진행
ctx.fillStyle = "rgb(255,255,255)";
ctx.fill();
ctx.closePath();
// 원 안의 부채꼴
}저장을 하고 다시 확장프로그램을 눌러보면 적용이 된 것을 확인할 수 있습니다.
rgb값이 255,0,0인 바탕원과 rgb값이 255,255,255인 부채꼴이 겹쳐져 있습니다.
이제 이 부채꼴을 시간이 흐름에 따라 각도를 변경해주면 됩니다.
그 전에 설정한 시간에 따라 시작 부채꼴 각도를 달리해보겠습니다.
Time Timer는 0 ~ 60분의 시간을 설정하여 사용하기 때문에 0분일때는 종료각도가 (Math.PI/180)*270 이어야 하고 60분일때는 종료각도가 (Math.PI/180)*-90 이어야 합니다.
즉, 종료각도는 (45-Minute) * 6으로 계산할 수 있습니다.
이제 Minute을 받기 위해 input와 button을 추가해주겠습니다.
<!doctype html>
<html>
<head>
<script src="script.js"> </script>
<meta charset="utf-8">
</head>
<body>
<h2 style="text-align : center"> Time Timer </h2>
<canvas id="myCanvas" width="300" height="300"></canvas>
<div style="text-align : center;">
<input type="number" id="minute" value="0">
<button type="submit" id="submit_btn">시작</button>
</div>
</body>
</html>script.js에는 버튼 클릭 시 input에 있는 값을 받아오는 코드를 추가하였습니다.
window.onload=draw;
function draw(){
var ctx=document.getElementById('myCanvas').getContext('2d');
ctx.beginPath();
ctx.arc(150,150,100,0,(Math.PI/180)*360, true);
// ctx.arc(x,y, 반지름, 시작각도, 종료각도, 그리는 방향)
// true = 반시계, false = 시계 방향
ctx.fillStyle = "rgb(255,0,0)";
ctx.fill();
ctx.stroke();
ctx.closePath();
// 바탕 원
submit_btn.onclick = function() {
var min = document.getElementById('minute').value;
var end = (45-min)*6;
ctx.beginPath();
ctx.moveTo(150,150);
ctx.arc(150,150,100,(Math.PI/180)*270,(Math.PI/180)*end, false);
// 경과한 시간이 하얀색으로 나와야 하기때문에 시계 방향으로 진행
ctx.fillStyle = "rgb(255,255,255)";
ctx.fill();
ctx.closePath();
// 원 안의 부채꼴
}
}확장프로그램을 클릭하면 처음에는 빨간 바탕원만 존재합니다.
숫자를 입력 후 시작 버튼을 누르면 설정한 시간만큼 빨간 부분이 남게 됩니다.
자료출처 : http://blog.naver.com/javaking75/140170132097
HTML5 canvas - 원(호) 그리기 (arc)
원을 그리기전 알아야 할 정보 각도(degree) 가 아닌 호도(radian) 를 이용! 각도를 호도로 변환하는 ( 각...
blog.naver.com
'Programming > Chrome Extension' 카테고리의 다른 글
| 크롬 확장프로그램 Time Timer 개발하기 - 4 (0) | 2020.03.19 |
|---|---|
| 크롬 확장프로그램 Time Timer 개발하기 - 3 (0) | 2020.03.19 |
| 크롬 확장프로그램 Time Timer 개발하기 - 1 (0) | 2020.03.18 |