Canvas製作時鐘
阿新 • • 發佈：2019-02-07
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#mycanvas{
position: absolute;
left:50%;
margin-left:-250px;
border:5px solid #fff;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
background-color: rgb(58, 179, 255);
}
</style>
</head>
<body>
<!--
canvas：html5新增的畫布物件，可以在其中繪製任何的圖形，以及線條效果，包括圖片
注意canvas的尺寸應該通過元素的屬性直接設定，而不是使用樣式實現(失幀)
-->
<canvas id="mycanvas" width="500px" height="500px">您的瀏覽器太low了,請切換</canvas>
<script>
//獲取畫布物件
var mycanvas = document.getElementById('mycanvas');
//獲取一個2d繪圖環境（拿到一支畫筆）
var ctx = mycanvas.getContext('2d');
function draw(){
//獲取系統時間
var nowTime = new Date();
var hours = nowTime.getHours();//獲取時
var minutes = nowTime.getMinutes();//獲取分
var seconds = nowTime.getSeconds();//獲取秒
//限定小時資料為12
hours = hours > 12 ? hours-12 : hours;
//精準設定時針在錶盤上的位置
hours = hours + minutes/60;
//清除畫布（防止覆蓋）
ctx.clearRect(0,0,500,500);
//初始化畫筆的樣式
ctx.lineWidth = 5; //設定線條的寬度
ctx.strokeStyle = '#fff'; //設定線條顏色
ctx.beginPath();//開始新的繪圖路徑
//設定一個圓形路徑
ctx.arc(250,250,150,0,360,false);
//繪製圖形
ctx.stroke();
ctx.closePath();//結束當前繪圖路徑
//繪製刻度(時刻度)
for(var i = 0;i < 12;i++){
ctx.beginPath();
ctx.lineWidth = 10;
//儲存當前繪圖環境
ctx.save();
//重置繪製起始位置(將圓心位置重置為0,0)
ctx.translate(250,250);
//旋轉畫布到一定的弧度 弧度=角度*PI/180
ctx.rotate(i * 30 * Math.PI / 180);
//設定繪製線條的起始位置
ctx.moveTo(0,140);
//設定線條的結束位置
ctx.lineTo(0,150);
//繪製路徑
ctx.stroke();
//還原初始的繪圖環境
ctx.restore();
ctx.closePath();
}
//繪製刻度(分刻度)
for(var i = 0;i < 60;i++){
ctx.beginPath();
ctx.lineWidth = 3;
//儲存當前繪圖環境
ctx.save();
//重置繪製起始位置(將圓心位置重置為0,0)
ctx.translate(250,250);
//旋轉畫布到一定的弧度 弧度=角度*PI/180
ctx.rotate(i * 6 * Math.PI / 180);
//設定繪製線條的起始位置
ctx.moveTo(0,142);
//設定線條的結束位置
ctx.lineTo(0,146);
//繪製路徑
ctx.stroke();
//還原初始的繪圖環境
ctx.restore();
ctx.closePath();
}
/*繪製時針*/
ctx.beginPath();
ctx.lineWidth = 5;
//儲存當前繪圖環境
ctx.save();
//重置繪製起始位置(將圓心位置重置為0,0)
ctx.translate(250,250);
//旋轉畫布到一定的弧度 弧度=角度*PI/180
ctx.rotate(hours * 30 * Math.PI / 180);
//設定繪製線條的起始位置
ctx.moveTo(0,10);
//設定線條的結束位置
ctx.lineTo(0,-100);
//繪製路徑
ctx.stroke();
//還原初始的繪圖環境
ctx.restore();
ctx.closePath();
/*繪製分針*/
ctx.beginPath();
ctx.lineWidth = 3;
//儲存當前繪圖環境
ctx.save();
//重置繪製起始位置(將圓心位置重置為0,0)
ctx.translate(250,250);
//旋轉畫布到一定的弧度 弧度=角度*PI/180
ctx.rotate(minutes * 6 * Math.PI / 180);
//設定繪製線條的起始位置
ctx.moveTo(0,10);
//設定線條的結束位置
ctx.lineTo(0,-120);
//繪製路徑
ctx.stroke();
//還原初始的繪圖環境
ctx.restore();
ctx.closePath();
/*繪製秒針*/
ctx.beginPath();
ctx.lineWidth = 1;
ctx.strokeStyle = '#f00';
//儲存當前繪圖環境
ctx.save();
//重置繪製起始位置(將圓心位置重置為0,0)
ctx.translate(250,250);
//旋轉畫布到一定的弧度 弧度=角度*PI/180
ctx.rotate(seconds * 6 * Math.PI / 180);
//設定繪製線條的起始位置
ctx.moveTo(0,10);
//設定線條的結束位置
ctx.lineTo(0,-135);
//繪製路徑
ctx.stroke();
//還原初始的繪圖環境
ctx.restore();
ctx.closePath();
}
setInterval(draw,1000);
</script>
</body>
</html>