//取得畫布
var c = document.getElementById("myCanvas");
//取得繪圖區域
var ctx = c.getContext("2d"); 
//取得螢幕尺寸，設定畫布跟變數
var ww=c.width=$(window).outerWidth();
var wh=c.height=$(window).outerHeight();
//設定中心點
var center={x: ww/2,y: wh/2};
//因為上下顛倒的關係，scaleY給-1

function getWindowSize(){
  //設定大小
  ww=c.width=$(window).outerWidth();
  wh=c.height=$(window).outerHeight();
  
  //重新設定中心點
  center={x: ww/2,y: wh/2};
  
  //將畫布的零點偏移到中心
  ctx.restore();
  ctx.translate(center.x,center.y);
}

//設定當網頁尺寸變動的時候要重新抓跟設定大小、中心
$(window).resize(getWindowSize);
getWindowSize();

//整個程式的時間，用來做些動態
var time=0;

//設定十毫秒一次
setInterval(draw,10);

function draw(){

  //清除背景
  ctx.fillStyle = "#111";
  ctx.beginPath();
  //起點/長/寬
  ctx.rect(-2000,-2000,4000,4000);
  ctx.fill();
  
  //坐標軸
  ctx.strokeStyle="rgba(255,255,255,0.1)";
  ctx.lineWidth=1;
  //x
  ctx.moveTo(-ww/2,0);
  ctx.lineTo(ww/2,0);
  //y
  ctx.moveTo(0,-wh/2);
  ctx.lineTo(0,wh/2);
  ctx.stroke();

  //------------------------------
  //繪製變動弧線
  //設定半徑
  var r=200;
  //將角度轉換為弧度
  var deg_to_pi=Math.PI/180;
  
  //重新開始繪製
  ctx.beginPath();
  ctx.lineWidth=1;
  for(var i=0;i<=200;i++){
    //設定變動的半徑跟角度
    // var var_r = r;
    var var_r = r + Math.sin(Math.PI*2*i/10+time/20)*2;
    var deg = (i/200)*360 * deg_to_pi;
    //連線
    ctx.lineTo(
      var_r * Math.cos(deg),
      var_r * Math.sin(deg)
    );
  }
  //設定顏色跟繪製
  ctx.strokeStyle="#FFF";
  ctx.stroke();
  
  
  //-----------------------------
  //繪製刻度（內圈）
  
  var r = 220;
  var count = 240;

  ctx.lineWidth=1;
  for(var i=0;i<=count;i++){
    
    //最基本的角度分佈
    var deg = 360*(i/count)*deg_to_pi;
    
    //往內偏移的量
    var pan=(i % 60 == 0 ? -4 : 0);
    
    //長度(用於數設定特定大小)
    var len= 4 + (i % 10 == 0?4:0) + (i % 60 == 0?8:0);
    var opacity=(len>4)?1:0.7;
    
    //開始分結束的半徑
    var start_r = r+pan;
    var end_r = r+pan+len;
    
    //重新開始繪製
    ctx.beginPath();
    ctx.moveTo(
      (start_r) * Math.cos(deg),
      (start_r) * Math.sin(deg)
    );
    ctx.lineTo(
      (end_r) * Math.cos(deg),
      (end_r) * Math.sin(deg)
    );
    
    //設定繪製顏色跟透明度
    ctx.strokeStyle="rgba(255,255,255,"+opacity+")";
    //繪製
    ctx.stroke();
  
  }

  //------------------------------
  //繪製刻度（外圈）
  
  var r = 400;
  var count = 80;

  ctx.lineWidth=1;
  for(var i=0;i<=count;i++){
    //往內偏移的量
    var pan=(i % 60 == 0?-4:0);
    //長度(用於數設定特定大小)
    var len= 4 + (i % 20 == 0?4:0) + (i % 60 == 0?8:0);
    var opacity=(len>4)?1:0.7;
    var deg=360*(i/count)*deg_to_pi;
    
    var start_r=r+pan;
    var end_r=r+pan+len;
    
    //重新開始繪製
    ctx.beginPath();
    ctx.moveTo(
      (start_r)*Math.cos(deg),
      (start_r)*Math.sin(deg)
    );
    ctx.lineTo(
      (end_r)*Math.cos(deg),
      (end_r)*Math.sin(deg)
    );
    
    //設定繪製顏色跟透明度
    ctx.strokeStyle="rgba(255,255,255,"+opacity+")";
    //繪製
    ctx.stroke();
  
  }
  
  //-----抓取現在的時間
  var now=new Date();
  var sec=now.getSeconds();
  var min=now.getMinutes();
  var hour=now.getHours();
  
  //更新文字中的時間
  $(".time").text("+00:"+hour+":"+min+":"+sec);
  
  
  //畫指針的函數
  function drawPointer(r,deg,lineWidth){
    
    //清空
    ctx.beginPath();
    ctx.lineWidth=lineWidth;
    
    //轉換角度(因為從右邊開始)
    var sec_deg = deg + 90;
    
    //從中心出發
    ctx.moveTo(0,0);
    
    //畫線
    ctx.lineTo(
      r*0.8*Math.cos( sec_deg * deg_to_pi ),
      r*0.8*Math.sin( sec_deg * deg_to_pi )
    );
    
    //繪製
    ctx.stroke();
  }
  
  //角度- 刻度/總數    
  //小時會有分鐘偏誤
  drawPointer(400, -360 * ( (sec) / 60 ) , 1 );
  drawPointer(210, -360 * ( (min) / 60 ) , 1 );
  drawPointer(150, -360 * ( (hour + min / 60 ) / 12.0 ) , 4 );
   
  
  //繪製外框
  var r=300;
  var count=240;
  ctx.beginPath();
  ctx.lineWidth=4;
  for(var i=0;i<=count;i++){
    //將240個點平均分布在圓周上，加上一點點時間
    deg= 360 * ( i / count) + time / 200;
    //如果每180度以內餘數 > 90度
    if ( ( deg % 180 ) > 90 ){
      //如果成立就預設要畫
      ctx.lineTo(
        r * Math.cos( deg * deg_to_pi),
        r * Math.sin( deg * deg_to_pi)
      );
    }else{
      //不成立就只移動點，不繪製
      ctx.moveTo(
        r * Math.cos( deg * deg_to_pi),
        r * Math.sin( deg * deg_to_pi)
      );
    }
  }
  
  //設定樣式跟繪製
  ctx.strokeStyle="#FFF";
  //將剛剛預設要畫的都畫出來
  ctx.stroke();
  
  //更新繪製的時間
  time=time+1;
}