var myCanvas = document.getElementById('myCanvas');
var c = myCanvas.getContext('2d');
function clock(){
  //clearRect清除
  c.clearRect(0,0,400,400);
  var data = new Date();
  var sec =data.getSeconds();
  var min =data.getMinutes();
  var hour=data.getHours();
  //save() 方法保存當前圖像狀態(tài)的一份拷貝蝌蹂。
  c.save();
  //translate() 方法轉(zhuǎn)換畫布的用戶坐標系統(tǒng)。
  c.translate(200,200);
  c.rotate(-Math.PI/2);

  //外表盤
  //beginPath() 方法在一個畫布中開始子路徑的一個新的集合曹锨。
  c.beginPath();
  //添加顏色
  // c.strokeStyle = "pink";
  c.arc(0,0,145,0,Math.PI*2);
  c.moveTo(135,0);
  c.arc(0,0,135,0,Math.PI*2);
  // c.lineWidth = 12 ;
  c.stroke();

  //時鐘刻度線
  for(var i = 0;i<12;i++){
    c.beginPath();
    c.strokeStyle="#000";
    //moveTo到lineTod的差值是距離
    c.moveTo(100,0);
    c.lineTo(120,0);
    //stroke() 方法繪制當前路徑孤个。
    c.stroke();
    c.rotate(Math.PI/6);
    //closePath() 方法關閉一條打開的子路徑。
    c.closePath();
  }
  //分鐘刻度線
  for(var i = 0;i<60;i++){
    c.beginPath();
    c.strokeStyle="#000";
    c.moveTo(117,0);
    c.lineTo(120,0);

    //stroke() 方法繪制當前路徑沛简。
    c.stroke();
    c.rotate(Math.PI/30);
    //closePath() 方法關閉一條打開的子路徑齐鲤。
    c.closePath();
  }
    //畫時針
    hour = hour>12?hour-12:hour;
    c.beginPath();
    c.save();
    c.rotate(Math.PI/6*hour+Math.PI/6*min/60+Math.PI/6*sec/3600);
    c.moveTo(-20,0);
    c.lineTo(50,0);
    c.lineWidth=3;
    c.stroke();
    //restore() 方法將繪圖狀態(tài)置為保存值。
        c.restore();
        c.closePath();
    //畫分針
    c.beginPath();
    c.save();
    c.rotate(Math.PI/30*min+Math.PI/30*sec/60);
    c.moveTo(-30,0);
    c.lineTo(70,0);
    c.lineWidth=2;
    c.stroke();
    //restore() 方法將繪圖狀態(tài)置為保存值覆享。
        c.restore();
        c.closePath();
    //畫秒針
    c.beginPath();
    c.save();
    c.rotate(Math.PI/30*sec);
    c.moveTo(-40,0);
    c.lineTo(120,0);
    c.stroke();
    //restore() 方法將繪圖狀態(tài)置為保存值佳遂。
        c.restore();
        c.closePath();

    //stroke() 方法繪制當前路徑营袜。再次繪制一次不然會出錯
    c.restore();
}
clock();
setInterval(clock,1000);