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>