Html5时钟的实现

最近准备把自己的博客装修一下,首先,先为自己设计一个时钟吧,希望博客园能够尽快发放给我使用js的权限!

自从看见了苹果设计的那款因为侵权而赔钱了时钟,我就决定我的时钟一定是要参考这个来设计了!

不得不说,这是一个非常酷的设计!

准备工作

首先,定义一个Canvas

<div id="mineClock"  style="position:relative;margin:0px auto">
       <canvas id="canvas" style="background-color:#d7d7d7" width="244" height="300">您的浏览器不支持Canvas</canvas>
</div>

---

开始绘制

绘制此时钟采取的思路是，利用js获取时间，然后将各个时间作为变量设置时针、分针、秒针的旋转角度以及位置，每秒钟刷新一次，然后就能得到一个很酷的模拟时钟！

<script>
             var clock = document.getElementById('canvas');
             var ctx = clock.getContext('2d');
             function drawTime() {
                 ctx.clearRect(0, 0, 244, 300);
                 var date = new Date();  //获取当前时间
                 var year = date.getFullYear();
                 var month = date.getMonth();
                 var day = date.getDate();
                 var week = date.getDay();
                 var hour = date.getHours();
                 var min = date.getMinutes();
                 var sec = date.getSeconds();

                 hour = hour + min / 60;
                 hour = hour > 12 ? hour - 12 : hour;

                 var width = 244;
                 var height = 280;
                 var dot = {       //时钟中心
                     x: width / 2,
                     y: width / 2,
                     radius: 4
                 }
                 var radius = 115;
                 var maxBorderWidth = 8;
                 var minBorderWidth = 2;

                  //绘制年月日
                 ctx.fillStyle = "#000";
                 ctx.font = "30px Lucida Sans Unicode";
                 month = eval(month + 1);  //设置月份，月份得到的值为0·11，所以要加一得到实际值
                 var message = year + " 年" + month + " 月" + day;
                 ctx.fillText(message, 7, height);  

                 //绘制时钟中心点
                 ctx.lineWidth = maxBorderWidth;
                 ctx.beginPath();
                 ctx.fillStyle = "#e2e2e2";
                 ctx.arc(dot.x, dot.y, radius, 0, 2 * Math.PI, true);
                 ctx.fill();
                 ctx.closePath();

                 //绘制时刻度、分刻度

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

                     ctx.save();
                     var pointLong;
                     if (i % 5 == 0) {
                         ctx.lineWidth = maxBorderWidth;
                         pointLong = 25;
                     }
                     else {
                         ctx.lineWidth = minBorderWidth;
                         pointLong = 12;
                     }
                     ctx.strokeStyle = "#000";
                     ctx.translate(dot.x, dot.y);
                     ctx.rotate(i * 6 * Math.PI / 180);
                     ctx.beginPath();
                     ctx.moveTo(0, -radius + maxBorderWidth);
                     ctx.lineTo(0, -radius + maxBorderWidth + pointLong);
                     ctx.closePath();
                     ctx.stroke();
                     ctx.restore();
                 }
                 //绘制时针
                 ctx.save();
                 ctx.lineWidth = maxBorderWidth;
                 ctx.translate(dot.x, dot.y);
                 ctx.rotate(hour * 30 * Math.PI / 180);
                 ctx.beginPath();
                 ctx.moveTo(0, -55);
                 ctx.lineTo(0, 25);
                 ctx.closePath();
                 ctx.stroke();
                 ctx.restore();

                 //绘制分针
                 ctx.save();
                 ctx.lineWidth = maxBorderWidth;
                 ctx.translate(dot.x, dot.y);
                 ctx.rotate(min * 6 * Math.PI / 180);
                 ctx.beginPath();
                 ctx.moveTo(0, -97);
                 ctx.lineTo(0, 25);
                 ctx.closePath();
                 ctx.stroke();
                 ctx.restore();
                //绘制秒针
                 ctx.save();
                 ctx.strokeStyle = "red";
                 ctx.lineWidth = minBorderWidth;
                 ctx.translate(dot.x, dot.y);
                 ctx.rotate(sec * 6 * Math.PI / 180);
                 ctx.beginPath();
                 ctx.moveTo(0, -75);
                 ctx.lineTo(0, 25);
                 ctx.closePath();
                 ctx.stroke();
                 ctx.beginPath();
                 ctx.fillStyle = '#D6231C';
                 ctx.arc(0, -75, 6, 0, 2 * Math.PI, true);  //绘制秒针针尖的小圆点
                 ctx.fill();
                 ctx.closePath();
                 ctx.restore();
                //装饰时钟中心  两个小圆叠加
                 ctx.beginPath();
                 ctx.fillStyle = '#982127';
                 ctx.arc(dot.x, dot.y, dot.radius, 0, 2 * Math.PI, true);
                 ctx.fill();
                 ctx.closePath();

                 ctx.beginPath();
                 ctx.fillStyle = '#D6231C';
                 ctx.arc(dot.x, dot.y, 2, 0, 2 * Math.PI, true);
                 ctx.fill();
                 ctx.closePath();
                //再时钟上添加签名
                 ctx.fillStyle = "#000";
                 ctx.font = "15px Comic Sans MS";
                 ctx.fillText("Chal Mine", dot.x-30, dot.y+50);
             }
             setInterval(drawTime, 1000);  //每秒刷新
    </script>

---

如果你拥有了博客园的js权限，那么你就可以将此时钟添加到博客园的侧边栏了！