您好,欢迎来到源码搜藏!分享精神,快乐你我!提示:担心找不到本站?在百度搜索“源码搜藏”,网址永远不丢失!
  • 首 页
  • 在线工具
  • 当前位置:首页 > 网页特效 > 时间日期 >

    html5的Canvas实例 指针走动的时钟

    时间:2014-04-08 08:15 来源:互联网 作者:源码搜藏 浏览:收藏 挑错 推荐 打印

    运行代码保存代码复制代码 提示:您可以先修改部分代码再运行,保存代码功能在Firefox下无效。
    • 又一个html5 Canvas实例——制作一个指针走动的时钟,运用setInternal(代码,(毫秒)时间) 让时钟动起来,圆形个性,表盘、指针等都是Canvas绘图完成,无运用图像,学习HTML5编程的可参阅典范,JS代码有些已绘出注释,便于学习了解。
    • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>获取本地时间的Html5时钟特效</title>
      </head>
      <body>
      <div style="width:520px;margin:0 auto;">
      <canvas id="clock" width="520" height="520">您的浏览器不支持canvas标签</canvas>
      </div>
      <script type="text/javascript">
      var canvas = document.getElementById('clock');
      var clock = canvas.getContext('2d');
      function drowClock(){
      //清除画布
      clock.clearRect(0, 0, 800, 800);
      var now = new Date();
      var secd = now.getSeconds();
      var min = now.getMinutes();
      var hour = now.getHours();
      //小时必须获取浮点类型(小时+分数转化的小时)
      //时间格式19:23:30
      //将24小时进制装换为12小时进制
      hour = hour + (min / 60);
      hour = hour > 12 ? hour - 12 : hour;
      //背景
      clock.beginPath();
      clock.lineWidth = 10;
      clock.strokeStyle = "blue";
      clock.arc(250, 250, 200, 0, 360, false);
      clock.stroke();
      clock.closePath();
      //刻度
      //时刻度
      for (var i = 0; i < 12; i++) {
      clock.save();
      //设置时针的粗细
      clock.lineWidth = 7;
      //设置时针的颜色
      clock.strokeStyle = "#000";
      //先设置0,0点
      clock.translate(250, 250);
      //再设置旋转角度
      clock.rotate((i * 30) * Math.PI / 180);//角度*Math.PI/180=弧度
      clock.beginPath();
      clock.moveTo(0, -170);
      clock.lineTo(0, -190);
      clock.closePath();
      clock.stroke();
      clock.restore();
      }
      //分刻度
      for (var i = 0; i < 60; i++) {
      clock.save();
      //设置时针的粗细
      clock.lineWidth = 3;
      //设置时针的颜色
      clock.strokeStyle = "#000";
      //先设置0,0点
      clock.translate(250, 250);
      //再设置旋转角度
      clock.rotate((i * 6) * Math.PI / 180);//角度*Math.PI/180=弧度
      clock.beginPath();
      clock.moveTo(0, -180);
      clock.lineTo(0, -190);
      clock.closePath();
      clock.stroke();
      clock.restore();
      }
      //时针
      clock.save();
      clock.lineWidth = 7;
      clock.strokeStyle = "black";
      clock.translate(250, 250);
      clock.rotate(hour * 30 * Math.PI / 180);
      clock.beginPath();
      clock.moveTo(0, -140);
      clock.lineTo(0, 10);
      clock.stroke();
      clock.closePath();
      clock.restore();
      ////分针
      clock.save();
      clock.lineWidth = 5;
      clock.strokeStyle = "black";
      clock.translate(250, 250);
      clock.rotate(min * 6 * Math.PI / 180);
      clock.beginPath();
      clock.moveTo(0, -160);
      clock.lineTo(0, 10);
      clock.stroke();
      clock.closePath();
      clock.restore();
      //秒针
      clock.save();
      clock.lineWidth = 3;
      clock.strokeStyle = "red";
      clock.translate(250, 250);
      clock.rotate(secd * 6 * Math.PI / 180);
      clock.beginPath();
      clock.moveTo(0, -170);
      clock.lineTo(0, 10);
      clock.closePath();
      clock.stroke();
      //画交叉点
      clock.beginPath();
      clock.arc(0, 0, 5, 0, 360, false);
      clock.closePath();
      clock.fillStyle = "gray";
      clock.fill();
      clock.stroke();
      clock.beginPath();
      clock.arc(0, -150, 5, 0, 360, false);
      clock.closePath();
      clock.fillStyle = "gray";
      clock.fill();
      clock.stroke();
      clock.restore();
      }
      //使用setInternal(代码,(毫秒)时间)  让时钟动起来
      drowClock();
      setInterval(drowClock, 1000);
      </script>
      </body>
      </html>
    html5的Canvas实例 指针走动的时钟由源码搜藏网整理,转载请注明出处http://www.codesocang.com/texiao/shijian/7053.html
    标签:网站源码