时钟

<!DOCTYPE html>
<html>
<head>
<title>时钟</title>

</head>
<body>
<canvas id="clock" width="600"height="600">你的浏览器不支持canvas标签，无法看到时钟
</canvas>

function drawClock(){//封装以下函数
//清除画布
cxt.clearRect(0,0,600,600);

  var now = now Date();
  var sec=now.getseconds();
  var min=now.getMinutes();
  var hour=now.getHours();

  //小时必须获取浮点类型（小时+分数转化成的小时）
  hour=hour+min/60;

  //问题19：23：30
  //将24小时制转换为12小时制
  hour=hour>12?hour-12:hour

//表盘（蓝色）
  cxt.linewidth=10;
  cxt.strokeStyle="#blue"
  cxt.beginPath();
  cxt.arc(250,250,200,0,360,flase);
  cxt.closePath();
  cxt.stroke();

//刻度

  //时刻度
   for(var i=0;i<12;i++){
    cxt.save();
    // 设置时刻度的粗细
    cxt.linewidth=7;
    // 设置时刻度的颜色
    cxt.strokeStyle="#000";
    //设置0，0点
    cxt.translate(250,250);
    //再设置旋转角度
    cxt.restore(i*30*Math.PI/180);//角度*Math.PI/180=弧度
    cxt.beginPath();
    cxt.moveTo(0,-170);
    cxt.lineTo(0,-190);
    cxt.closePath();
    cxt.stroke();
    cxt.restore();
   }

  //分刻度
   for(var i=0;i<60;i++){
    cxt.save();
    // 设置分刻度的粗细
     cxt.linewidth=5;
     // 设置分刻度的颜色
     cxt.strokeStyle="#000";
     //设置或者重置画布的0，0
     cxt.translate(250,250);
     //设置旋转角度
     cxt.restore(i*6*Math.PI/180);
     //角度*Math.PI/180=弧度
     cxt.beginPath();
     cxt.moveTo(0,-180);
     cxt.lineTo(0,-190);
     cxt.closePath();
     cxt.stroke();
     cxt.restore();
    }

  //时针
    cxt.save();
    //设置时针风格
    cxt.linewidth=7;
    //设置时针的颜色///
    cxt.strokeStyle="#000";
    // 设置异次元的0，0点
    cxt.translate(250,250);
    // 设置旋转角度
    cxt.restore(hour*30*Math.PI/180);
    cxt.beginPath();
    cxt.moveTo(0，-140);
    cxt.lineTo(0，8);
    cxt.closePath();
    cxt.stroke();
    cxt.restore();
    //

  //分针
    cxt.save();
    //设置分针风格
    cxt.linewidth=5;
    //设置分针的颜色///
    cxt.strokeStyle="#000";
    // 设置异次元的0，0点
    cxt.translate(250,250);
    // 设置旋转角度
    cxt.restore(min*6*Math.PI/180);
    cxt.beginPath();
    cxt.moveTo(0，-160);
    cxt.lineTo(0，15);
    cxt.closePath();
    cxt.stroke();
    cxt.restore();

  //秒针
    cxt.save();
    //设置秒针风格
    cxt.linewidth=3;
    //设置秒针的颜色
    cxt.strokeStyle="red";
    // 设置异次元的0，0点
    cxt.translate(250,250);
    // 设置旋转角度
    cxt.restore(sec*6*Math.PI/180);
    //画图
    cxt.beginPath();
    cxt.moveTo(0，-170);
    cxt.lineTo(0，20);
    cxt.closePath();
    cxt.stroke();
    //画出时针、分针、秒针的交叉点
    cxt.beginPath();
    cxt.arc(0,0,5,0,360,false);
    cxt.closePath();
    //设置填充样式
    cxt.fillStyle="gray";
    cxt.fill();
    //设置笔触样式(已设置)
    cxt.stroke();
    //设置秒针前段的小圆点
    cxt.beginPath();
    cxt.arc(0,160,5,0,360,false);
    cxt.closePath();
    //设置填充样式
    cxt.fillStyle="gray";
    cxt.fill();
    //设置笔触样式(已设置)
    cxt.stroke();

cxt.restore();
}

//使用setInterval(代码，毫秒时间) 让时钟动起来
setInterval(drawClock,1000)

</script>

</body>
</html>