溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
<!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> 免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
