這篇文章主要介紹了JS+Canvas如何繪制動態時鐘效果，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
具體內容如下
<!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>JS是JavaScript的簡稱，它是一種直譯式的腳本語言，其解釋器被稱為JavaScript引擎，是瀏覽器的一部分，主要用于web的開發，可以給網站添加各種各樣的動態效果，讓網頁更加美觀。
感謝你能夠認真閱讀完這篇文章，希望小編分享的“JS+Canvas如何繪制動態時鐘效果”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
