JS+Canvas绘制时钟效果

本文实例为大家分享了使用canvas绘制时钟的具体代码,供大家参考,具体内容如下

1. clock.html   

<!doctype html>
<html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="Description" content="">
 <title>canvas时钟</title>
 </head>
 <body>
  <canvas id="canvas" width="300" height="300"></canvas>
  <script>
    var canvas=document.getElementById("canvas");
    var context=canvas.getContext('2d');
    //draw();
    function draw(){
      //得到当前系统的时分秒
      var now=new Date();
      var sec=now.getSeconds();
      var min=now.getMinutes();
      var hour=now.getHours();
      hour>=12&&(hour=hour-12);

      var radius = Math.min(canvas.width/2,canvas.height/2);
      //初始化画布
      context.save();
      context.clearRect(0,0,canvas.width,canvas.height);
       context.translate(canvas.width/2,canvas.height/2);
      context.rotate(-Math.PI/2);
      context.save();

      //表框

      //小时刻度
      context.strokeStyle="black";
      context.fillStyle="black";
      context.lineWidth=3;
      context.lineCap="round";
      context.beginPath();
      for(var i=0;i<12;i++){
        context.rotate(Math.PI/6);
        context.moveTo(radius-30,0);
        context.lineTo(radius-10,0);

      }
      context.stroke();
      context.restore();
      context.save();

      //分钟刻度
      context.lineWidth=2;
      context.beginPath();
      for(var i=0;i<60;i++){
        if(!i%5==0){
        context.moveTo(radius-15,0);
        context.lineTo(radius-10,0);
        }
        context.rotate(Math.PI/30);
      }
      context.stroke();
      context.restore();
      context.save();

      //画上时针

       context.rotate((Math.PI/6)*hour+(Math.PI/360)*min+(Math.PI/21600)*sec);
       context.lineWidth=6;
       context.beginPath();
       context.moveTo(-10,0);
       context.lineTo(radius*0.5,0);
       context.stroke();
      context.restore();
      context.save();

       context.rotate((Math.PI/30)*min+(Math.PI/1800)*sec);
   context.strokeStyle="#29A8DE";
   context.lineWidth=4;
   context.lineCap="butt";
   context.beginPath();
   context.moveTo(-20,0);
   context.lineTo(radius*0.7,0);
   context.stroke();
   context.restore();
   context.save();

   context.rotate(sec*Math.PI/30);
   context.strokeStyle="red";
   context.lineWidth=2;
   context.lineCap="butt";
   context.beginPath();
   context.moveTo(-30,0);
   context.lineTo(radius*0.9,0);
   context.stroke();
   context.restore();
   context.save();

      context.lineWidth=4;
       context.strokeStyle="gray";
      context.beginPath();
         context.arc(0,0,radius,0,Math.PI*2,true);
     context.stroke();
     context.restore();

     context.restore();
    }

    window.onload=function(){
      setInterval(draw,1000)
    }
  </script>
 </body>
</html>

2. JavaScript代码

<script>
    var canvas=document.getElementById("canvas");
    var context=canvas.getContext('2d');
    //draw();
    function draw(){
      //得到当前系统的时分秒
      var now=new Date();
      var sec=now.getSeconds();
      var min=now.getMinutes();
      var hour=now.getHours();
      hour>=12&&(hour=hour-12);

      var radius = Math.min(canvas.width/2,canvas.height/2);
      //初始化画布
      context.save();
      context.clearRect(0,0,canvas.width,canvas.height);
       context.translate(canvas.width/2,canvas.height/2);
      context.rotate(-Math.PI/2);
      context.save();

      //表框

      //小时刻度
      context.strokeStyle="black";
      context.fillStyle="black";
      context.lineWidth=3;
      context.lineCap="round";
      context.beginPath();
      for(var i=0;i<12;i++){
        context.rotate(Math.PI/6);
        context.moveTo(radius-30,0);
        context.lineTo(radius-10,0);

      }
      context.stroke();
      context.restore();
      context.save();

      //分钟刻度
      context.lineWidth=2;
      context.beginPath();
      for(var i=0;i<60;i++){
        if(!i%5==0){
        context.moveTo(radius-15,0);
        context.lineTo(radius-10,0);
        }
        context.rotate(Math.PI/30);
      }
      context.stroke();
      context.restore();
      context.save();

      //画上时针

       context.rotate((Math.PI/6)*hour+(Math.PI/360)*min+(Math.PI/21600)*sec);
       context.lineWidth=6;
       context.beginPath();
       context.moveTo(-10,0);
       context.lineTo(radius*0.5,0);
       context.stroke();
      context.restore();
      context.save();

       context.rotate((Math.PI/30)*min+(Math.PI/1800)*sec);
   context.strokeStyle="#29A8DE";
   context.lineWidth=4;
   context.lineCap="butt";
   context.beginPath();
   context.moveTo(-20,0);
   context.lineTo(radius*0.7,0);
   context.stroke();
   context.restore();
   context.save();

   context.rotate(sec*Math.PI/30);
   context.strokeStyle="red";
   context.lineWidth=2;
   context.lineCap="butt";
   context.beginPath();
   context.moveTo(-30,0);
   context.lineTo(radius*0.9,0);
   context.stroke();
   context.restore();
   context.save();

      context.lineWidth=4;
       context.strokeStyle="gray";
      context.beginPath();
         context.arc(0,0,radius,0,Math.PI*2,true);
     context.stroke();
     context.restore();

     context.restore();
    }

    window.onload=function(){
      setInterval(draw,1000)
    }
  </script>

以上就是本文的全部内容,希望对大家学习javascript程序设计有所帮助。

(0)

相关推荐

  • js+canvas绘制矩形的方法

    本文实例讲述了js+canvas绘制矩形的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!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/xhtm

  • JS基于HTML5的canvas标签实现炫目的色相球动画效果实例

    本文实例讲述了JS基于HTML5的canvas标签实现色相球效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>JS canvas标签制作色相球</title> </head> <body> <canvas></canvas&g

  • JavaScript+html5 canvas实现图片破碎重组动画特效

    也许你见过HTML5图片破碎动画特效,实现的原理也挺简单的.但是你应该没有见过视频也可以破碎重组,这个HTML5动画就是利用Canvas的相关特性,实现了点击鼠标让视频破碎重组的效果.在视频区域点击鼠标,即可让该区域的视频破碎,让后经过一段时间后,破碎的区域又可以重组还原,视觉效果非常棒. HTML代码 <div style="display:none"> <video id="sourcevid" autoplay="true"

  • JS Canvas定时器模拟动态加载动画

    本文实例为大家分享了Canvas定时器动态加载动画,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> </style> </head> <body> <canvas id="canva

  • js canvas实现擦除动画

    本文实例为大家分享了canvas擦除动画的实现原理.实现代码.以及在实现过程中遇到的问题,供大家参考,具体内容如下 原理总结为就是在移动设备上将某张图片擦掉显示另一张图片,利用canvas来实现. 如果是用户手动擦除,则需要监听touchmove,touchend等事件,并计算相应的坐标,利用canvas的clearRect或rect 画弧线或画线来实现.但是这会造成在androd手机上存在卡顿的现象. canvas有个globalCompositeOperation属性,这个属性的默认值是so

  • js+canvas绘制五角星的方法

    本文实例讲述了js+canvas绘制五角星的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!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/xht

  • javascript+HTML5 Canvas绘制转盘抽奖

    之前做过的项目中,有需要抽奖转盘功能的.项目已经完工一段时间了,也没出现什么严重的bug,所以现在拎出来分享给大家. 功能需求 1.转盘要美观,转动效果流畅. 2.转盘上需要显示奖品图片,并且奖品是后台读取的照片和名字. 3.转动动画完成后要有相应提示. 4.获取的奖品具体算法在数据库里操作,前端只提供最后的效果展示. 知识要点 1.引用了一个jq插件:awardRotate,用来实现更智能化的转动(插件下载:http://www.jqcool.net/jquery-jqueryrotate.h

  • javascript+HTML5的Canvas实现Lab单车动画效果

    本文实例讲述了javascript+HTML5的Canvas实现Lab单车动画效果.分享给大家供大家参考.具体如下: 这里运用HTML5实现的单车动画,运行一下效果你就明白了,不过不要在IE8下测试,没效果的.请在支持最新HTML3和CSS3的浏览器下测试,祝您好运. 运行效果截图如下: 具体代码如下: <html> <head> <title>Canvas Lab单车动画,HTML5动画</title> </head> <script t

  • JavaScript+html5 canvas绘制渐变区域完整实例

    本文实例讲述了JavaScript+html5 canvas绘制渐变区域的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title>demo</title> <style type="text/css"> #canvas { border:3px solid gray; } </style> </head&

  • JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例

    本文实例讲述了JavaScript+html5 canvas绘制缤纷多彩的三角形效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE HTML> <html> <head> <title>demo</title> <style type="text/css"> body { margin:0; padding:0; } #canvas { width:500px; heig

  • JS+canvas绘制的动态机械表动画效果

    本文实例讲述了JS+canvas绘制的动态机械表动画效果.分享给大家供大家参考,具体如下: 先来看看运行效果: 完整实例代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>www.jb51.net canvas时钟</title> <style> canvas { border: 1px

  • js+canvas简单绘制圆圈的方法

    本文实例讲述了js+canvas简单绘制圆圈的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!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/xh

随机推荐