用canvas製作漂亮的時鐘
需求如下：
一：分析項目？
- 分析時鐘的組成；
- 分析需要的canvas技術；
- 代碼實現；
- 美化效果。
二：時鐘組成？
- 錶盤(橙色)
- 刻度(黑色)
- 時針(黑色)
- 分針(黑色)
- 秒針(橙色)
- 錶盤中心樣式(中心徑向漸變)
- 秒針頭部樣式(圓圈嵌套)
三：分析需要的canvas技術？
基礎知識需要自己看，此項目需要必須理解並且掌握的東西有：
- 畫表盤：繪製圓的路徑技術，cxt.arc(6個參數)；
- 繪製文本：即錶盤上面的數字，會使用cxt.font、cxt.textAlign、cxt.textBaseline和cxt.fillTExt等繪製文本屬性；
- 變換方法：rotate();
- 重新規定原點的方法：translate(x,y)
- 保存上文環境和輸出上文環境方法的方法：save()和restore(),這兩個方法一定要理解
代碼如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>clock</title>
<style media="screen">
#clock{background: #636051;}
</style>
</head>
<body>
<canvas id="clock" width="500" height="500">
您的瀏覽器不支持canvas
</canvas>
</body>
<script type="text/javascript">
var clock = document.getElementById('clock');
var cxt = clock.getContext('2d');
function drawClock(){
var now = new Date();
var hours = now.getHours();
var minute = now.getMinutes();
var sec = now.getSeconds();
//轉換24小時進制轉換爲12小時進制
hours = hours>12 ? hours-12 : hours;
//畫圖之前先清除畫布
cxt.clearRect(0,0,500,500)
//設置原點
cxt.translate(250,250);
//錶盤(藍色)
cxt.lineWidth = 20;
cxt.strokeStyle = "#D78203";
cxt.fillStyle = "#EDEAE3";
cxt.beginPath();
cxt.arc(0,0,200,0,2*Math.PI,false);
cxt.stroke();
cxt.fill();
cxt.closePath();
//刻度樣式
var hour = [12,1,2,3,4,5,6,7,8,9,10,11];
for(var i=0; i<60; i++){
if(i%5 == 0){
cxt.save();
//填入小時的字體
var x = 160 * Math.cos((i/5*30-90)*Math.PI/180);
var y = 160 * Math.sin((i/5*30-90)*Math.PI/180);
cxt.font = "bold 18px Arial";
cxt.fillStyle = "#000";
cxt.textAlign = "center";
cxt.textBaseline = "middle";
cxt.fillText(hour[i/5],x,y);
//小時的刻度標識
cxt.lineWidth = 8;
cxt.strokeStyle = "#000";
cxt.rotate(i*30*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-170);
cxt.lineTo(0,-190);
cxt.closePath();
cxt.stroke();
cxt.restore();
}else{
cxt.save();
cxt.lineWidth = 5;
cxt.strokeStyle = "#000";
cxt.rotate(i*6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-180);
cxt.lineTo(0,-190);
cxt.stroke();
cxt.closePath();
cxt.restore();
}
}
//時針樣式
cxt.save();
cxt.lineWidth = 10;
cxt.strokeStyle = "#000";
cxt.rotate((hours + minute/60) * 30 * Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,15);
cxt.lineTo(0,-80);
cxt.stroke();
cxt.closePath();
cxt.restore();
//分針
cxt.save();
cxt.lineWidth = 7;
cxt.strokeStyle = "#000";
cxt.rotate((minute + sec/60)*6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,20);
cxt.lineTo(0,-130);
cxt.closePath();
cxt.stroke();
cxt.restore();
//秒針
cxt.save();
cxt.lineWidth = 5;
cxt.strokeStyle = "#D78203";
cxt.rotate(sec*6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,25);
cxt.lineTo(0,-160);
cxt.closePath();
cxt.stroke();
cxt.restore();
//中心的圓圈
cxt.beginPath();
var gradient = cxt.createRadialGradient(0,0,1,0,0,6);
gradient.addColorStop(0,"#fff");
gradient.addColorStop(1,"#615942");
cxt.fillStyle = gradient;
cxt.arc(0,0,7,0,2*Math.PI,false);
cxt.fill();
cxt.closePath();
//邊緣中心的圓圈
cxt.save();
cxt.fillStyle = "#D78203";
cxt.rotate(sec*6*Math.PI/180);
cxt.beginPath();
cxt.arc(0,-125,8,0,2*Math.PI,false);
cxt.fill();
cxt.closePath();
cxt.restore();
//鏤空秒針頭部的圓圈
cxt.save();
cxt.fillStyle = "#fff";
cxt.rotate(sec*6*Math.PI/180);
cxt.beginPath();
cxt.arc(0,-125,4,0,2*Math.PI,false);
cxt.fill();
cxt.closePath();
cxt.restore();
//還原原點
cxt.translate(-250,-250);
}
setInterval(drawClock,1000);
</script>
</html>