크롬 확장프로그램 Time Timer 개발하기 - 4

이제 만들어진 시계 타이머 둘레에 숫자를 입력해보겠습니다.

 

현재 만든 시계의 좌표는 아래와 같습니다.

이 원의 둘레 주변에 1 ~ 12의 숫자를 넣어주려고 합니다.

우선 간단하게 12시에만 숫자를 추가해보겠습니다.

popup.html은 그대로 두고 script.js에 number()라는 function을 추가합니다.

window.onload=draw;

function draw(){
  var ctx=document.getElementById('myCanvas').getContext('2d');
  background();
  number();
  // 바탕 원
  submit_btn.onclick = function() {
    var min = document.getElementById('minute').value;
    var time = min*60;
    var end = (45-(time/60))*6;
    var timer = setInterval(function() {
      time--;	// 1분 경과 시 min 1씩 감소
      end = (45-(time/60))*6;
      background();   // 매번 새로 바탕 원을 다시 그려줌
      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();
      // 원 안의 부채꼴
    },1000);   // 1초 간격으로 draw_time 실행
  }
  function background() {
    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();
  } // 바탕 원 그리는 함수
  function number() {
    ctx.font = "38px serif";      // 글자 크기
    ctx.textAlign = "center";     // 글자 가운데 정렬
    ctx.textBaseline = "middle";  // 글자 가운데 배치
    ctx.fillStyle = "black";      // 글자 색
    ctx.fillText("12", 150, 20);   // 글자와 x좌표 y좌표
  }
}

이제 1시부터 12시까지 숫자를 채워주겠습니다.

 

여기서 tranlsate는 캔버스의 원점값을 설정해주는 함수입니다. 시계 가운데를 기준으로 한바퀴 돌면서 fillText를 해주기 위해서 원점값을 150,150으로 잡았습니다.

이제 rotate 함수를 이용해서 30도씩 각도를 돌려가며 1시부터 12시까지 숫자를 찍어줬습니다.

window.onload=draw;

function draw(){
  var ctx=document.getElementById('myCanvas').getContext('2d');
  background();
  number();
  // 바탕 원
  submit_btn.onclick = function() {
    var min = document.getElementById('minute').value;
    var time = min*60;
    var end = (45-(time/60))*6;
    var timer = setInterval(function() {
      time--;	// 1분 경과 시 min 1씩 감소
      end = (45-(time/60))*6;
      background();   // 매번 새로 바탕 원을 다시 그려줌
      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();
      // 원 안의 부채꼴
    },1000);   // 1초 간격으로 draw_time 실행
  }
  function background() {
    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();
  } // 바탕 원 그리는 함수
  function number() {
    ctx.font = "38px serif";      // 글자 크기
    ctx.textAlign = "center";     // 글자 가운데 정렬
    ctx.textBaseline = "middle";  // 글자 가운데 배치
    ctx.fillStyle = "black";      // 글자 색
    ctx.translate(150,150);       // (150,150)좌표를 캔버스의 중심좌표(0,0)로 사용
    for ( var number = 1; number <= 12; number++ ){
      var angle = (Math.PI / 180) * 30;
      ctx.rotate( angle );
      ctx.fillText( number.toString(), 0, -120);
    }
    ctx.translate(-150,-150);
  }
}

시작시 화면입니다. 이제 숫자를 입력하고 시작버튼을 누르면 하얀 호가 점점 채워지게 됩니다.