canvas制作时钟，带详细注释

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() 方法保存当前图像状态的一份拷贝。
  c.save();
  //translate() 方法转换画布的用户坐标系统。
  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() 方法将绘图状态置为保存值。
        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() 方法将绘图状态置为保存值。
        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() 方法将绘图状态置为保存值。
        c.restore();
        c.closePath();

    //stroke() 方法绘制当前路径。再次绘制一次不然会出错
    c.restore();
}
clock();
setInterval(clock,1000);