JS+Canvas绘制时钟效果

2019-11-20 09:55:54

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了使用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程序设计有所帮助。

上一篇：jQuery前端开发35个小技巧

下一篇：基于JQuery实现图片上传预览与删除操作