H TML5 之（4）小项目一时钟

这里做一个HTML5 入门的练手，一个小时钟项目，可以再上面拓展很多，程序员培养的就是思想
<!DOCTYPE HTML>

<html>

<head>

<title>Click</title>

<style>

#clock{

 background:#abcdef;

}

</style>

</head>

<body>

<canvas id="clock" width="500" height="500" >

您的浏览器不支持标签，无法看到时钟

</canvas>

</body>

<script>

  var clock = document.getElementById("clock");

  var cxt = clock.getContext("2d");

  function drawCloclk(){

  cxt.clearRect(0,0,500,500);

  //获取时间对象

  var now = new Date();

  var sec = now.getSeconds();

  var min = now.getMinutes();

  var hours = now.getHours();

  //小时必须获取浮点类型

  hours = hours+min/60;

  //转换时间

  hours = hours >12?hours-12:hours;

  //表盘 蓝色

  cxt.lineWidth = 10;

  cxt.strokeStyle="blue";

  cxt.beginPath();

  cxt.arc(250,250,200,0,360,false);

  cxt.stroke();

  cxt.closePath();

  //刻度

  for(var i=0;i<12;i++){

     //开启异次元空间

      cxt.save();

      cxt.beginPath();

      cxt.lineWidth = 10;

      cxt.strokeStyle="#000";

      //设置原点

      cxt.translate(250,250);

      //设置旋转角度

      cxt.rotate(i*30*Math.PI/180);

      //画线

      cxt.moveTo(0,-170);

      cxt.lineTo(0,-190);

      cxt.stroke();

      cxt.closePath();

      cxt.restore();

  }

  //分刻度

    for(var i=0;i<60;i++){

     //开启异次元空间

      cxt.save();

      cxt.beginPath();

      cxt.lineWidth = 5;

      cxt.strokeStyle="#000";

      //设置原点

      cxt.translate(250,250);

      //设置旋转角度

      cxt.rotate(i*6*Math.PI/180);

      //画线

      cxt.moveTo(0,-180);

      cxt.lineTo(0,-190);

      cxt.stroke();

      cxt.closePath();

      cxt.restore();

  }

  //时针

       //开启异次元空间

      cxt.save();

      cxt.beginPath();

      cxt.lineWidth = 7;

      cxt.strokeStyle="#000";

      //设置原点

      cxt.translate(250,250);

      //设置旋转角度

      cxt.rotate(hours*30*Math.PI/180);

      //画线

      cxt.moveTo(0,-140);

      cxt.lineTo(0,10);

      cxt.stroke();

      cxt.closePath();

      cxt.restore();

  //分针

         //开启异次元空间

      cxt.save();

      cxt.beginPath();

      cxt.lineWidth = 5;

      cxt.strokeStyle="#000";

      //设置原点

      cxt.translate(250,250);

      //设置旋转角度

      cxt.rotate(min*6*Math.PI/180);

      //画线

      cxt.moveTo(0,-160);

      cxt.lineTo(0,15);

      cxt.stroke();

      cxt.closePath();

      cxt.restore();

  //秒针

           //开启异次元空间

      cxt.save();

      cxt.beginPath();

      cxt.lineWidth = 3;

      cxt.strokeStyle="red";

      //设置原点

      cxt.translate(250,250);

      //设置旋转角度

      cxt.rotate(sec*6*Math.PI/180);

      //画线

      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 = "blue";

      cxt.fill();

      cxt.stroke();

            cxt.beginPath();

      //画交叉点

      cxt.arc(0,-150,5,0,360,false)

      cxt.closePath();

      cxt.fillstyle = "blue";

      cxt.fill();

      cxt.stroke();

      cxt.restore();

      }

      //使用周期循环函数setInternal(代码，时间)，让时钟动起来

      drawCloclk;

      setInterval(drawCloclk,1000);

 </script>

</html>
H TML5 之 （4） 小项目一 时钟

H TML5 之（4）小项目一时钟
