<!DOCTYPE html>
<html>
<head></head>
<body>
<canvas id="clock" width="500" height="500"></canvas>
<script>
var clock = document.getElementById("clock");
var ctx = clock.getContext("2d");
function drawClock(){
//清除畫布
ctx.clearRect(0,0,500,500);
var now = new Date();
var sec = now.getSeconds();
var min = now.getMinutes();
var hour = now.getHours(); // 小時必須獲取浮點類型
hour = hour + min/60 ;
//將二十四小時進制轉換爲12小時進制
if(hour > 12){
hour -= 12 ;
}
// 錶盤
ctx.lineWidth = 10 ;
ctx.strokeStyle = "blue"
ctx.beginPath();
ctx.arc(250,250,200,0,360,false);
ctx.closePath();
ctx.stroke();
// 刻度 時刻度
for(var i=0; i<12; i++){
ctx.save();
ctx.lineWidth = 7 ;
ctx.strokeStyle= "#000";
ctx.translate(250,250) ; // 設置旋轉圓點
ctx.rotate(i*30*Math.PI/180); //設置旋轉角度 : 角度*Math.PI/180 = 弧度
ctx.beginPath();
ctx.moveTo(0,-170);
ctx.lineTo(0,-190);
ctx.closePath();
ctx.stroke();
ctx.restore();
}
// 分刻度
for(var i=0;i<60;i++){
ctx.save();
ctx.lineWidth= 5 ;
ctx.strokeStyle = "#000" ;
ctx.translate(250,250);
ctx.rotate(i*6*Math.PI/180);
ctx.beginPath();
ctx.moveTo(0,-180);
ctx.lineTo(0,-190);
ctx.stroke();
ctx.closePath();
ctx.restore();
}
// 時針
ctx.save();
ctx.lineWidth = 7 ;
ctx.strokeStyle = "#000";
ctx.translate(250,250); //設置異次元空間的0,0點
ctx.rotate(hour*30*Math.PI/180);
ctx.beginPath();
ctx.moveTo(0,-140);
ctx.lineTo(0,10);
ctx.closePath();
ctx.stroke();
ctx.restore();
//分針
ctx.save();
ctx.lineWidth = 5 ;
ctx.strokeStyle = "#000";
ctx.translate(250,250); //設置異次元空間的0,0點
ctx.rotate(min*6*Math.PI/180);
ctx.beginPath();
ctx.moveTo(0,-160);
ctx.lineTo(0,15);
ctx.closePath();
ctx.stroke();
ctx.restore();
//秒針
ctx.save();
ctx.lineWidth = 3 ;
ctx.strokeStyle = "#F00";
ctx.translate(250,250); //設置異次元空間的0,0點
ctx.rotate(sec*6*Math.PI/180);
ctx.beginPath();
ctx.moveTo(0,-170);
ctx.lineTo(0,20);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.arc(0,0,5,0,360,false);
ctx.closePath();
ctx.fillStyle="grey";
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.arc(0,-150,5,0,360,false);
ctx.closePath();
ctx.fillStyle="grey";
ctx.fill();
ctx.stroke();
ctx.restore();
}
drawClock();
setInterval(drawClock,1000);
</script>
</body>
</html>
Html5 - canvas - 時鐘
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章