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權限，那么你就可以將此時鍾添加到博客園的側邊欄了！