JavaScript Canvas绘制圆形时钟效果

2019-11-19 16:49:41

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了Canvas时钟效果展示的具体代码，供大家参考，具体内容如下

<html lang="en"> <head>  <meta charset="UTF-8">  <title></title>  <style>   canvas{    display: block;    margin: 0 auto;    background-color: #fdffad;    border: 1px solid #000;   }  </style>  <script type="text/javascript">    document.addEventListener('DOMContentLoaded',function(){    var oC=document.querySelector('canvas');    var gd=oC.getContext('2d');    var r=oC.width/2;     function drawBackground() {     gd.save();     //渐变      var ra = gd.createLinearGradient(600, 0, 400, 0);     ra.addColorStop(1, '#2dd9ff');     ra.addColorStop(0, '#8c48dd');      //表盘     gd.translate(r, r);     gd.beginPath();     gd.fillStyle = ra;     gd.lineWidth = 10;     gd.strokeStyle = '#211f4e';     gd.arc(0, 0, r-5, 0, Math.PI *2, false);     gd.fill();     gd.stroke();     //数字     for (var i = 1; i < 13; i++) {      var rad=i * Math.PI * 2 / 12;      var x = Math.sin(rad)*(r-70);      var y= -Math.cos(rad)*(r-70);      gd.fillStyle = "red";      gd.font = "bold 80px Calibri";      gd.lineWidth = 1;      gd.textAlign = 'center';      gd.textBaseline = 'middle';      gd.strokeText(i, x, y);     }     //点     for (var i = 0; i < 60; i++) {      gd.beginPath();      var rad=i * Math.PI * 2 / 60;      var x = Math.sin(rad)*(r-30);      var y= -Math.cos(rad)*(r-30);      if (i % 5 == 0) {       gd.fillStyle = 'red';      }      else {       gd.fillStyle = '#ccc'      }      gd.lineWidth = 2;      gd.arc(x, y, 6, 0, Math.PI * 2, false);      gd.fill();      gd.stroke();      gd.closePath();     }    }    //时针    function drawHour(h,m){     gd.save();     gd.beginPath();     var rad=2*Math.PI/12*h;     var mrad=2*Math.PI/12/60*m;     gd.rotate(rad+mrad);     gd.lineWidth=20;     gd.lineCap='round';     gd.moveTo(0,10);     gd.lineTo(0,-r/3);     gd.stroke();     gd.closePath();     gd.restore();    }    //分针    function drawMinutes(m){     gd.save();     gd.beginPath();     var rad=2*Math.PI/60*m;     gd.rotate(rad);     gd.lineWidth=10;     gd.lineCap='round';     gd.moveTo(0,10);     gd.lineTo(0,-r/2);     gd.stroke();     gd.closePath();     gd.restore();    }    //秒针    function drawSeconds(s){     gd.save();     gd.beginPath();     var rad=2*Math.PI/60*s;     gd.rotate(rad);     gd.fillStyle='red';     gd.moveTo(-2,20);     gd.lineTo(2,20);     gd.lineTo(1,-r+100);     gd.lineTo(-1,-r+100);     gd.fill();     gd.closePath();     gd.restore();    }    //圆点    function drawPoint(){     gd.beginPath();     gd.fillStyle='#fff';     gd.arc(0,0,5,Math.PI*2,false);     gd.fill();    }     function drawClock(){     gd.clearRect(0,0,oC.width,oC.height);     var oDate=new Date();     var h=oDate.getHours();     var m=oDate.getMinutes();     var s=oDate.getSeconds();     drawBackground();     drawHour(h,m);     drawMinutes(m);     drawSeconds(s);     drawPoint();     gd.restore();     }    drawClock();    setInterval(drawClock,1000);   },false);  </script> </head> <body> <canvas width="800" height="800"></canvas> </body> </html>

效果图：