首先是html頁面
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<title>HTML5 時鐘</title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<style>
.clocks {
height: 500px;
margin: 25px auto;
position: relative;
width: 500px;
}
</style>
</head>
<body>
<header>
<h2>HTML5 時鐘</h2>
</header>
<div class="clocks">
<canvas id="canvas" width="500" height="500"></canvas>
</div>
</body>
</html>然後是js
// inner variables
//定義全局變量
var canvas, ctx;
var clockRadius = 250;
var clockImage;
// draw functions :
function clear() { // clear canvas function
//clearRect() 方法清空給定矩形內的指定像素。
//參數：要清除的矩形左上角的 x 座標，y座標，寬度，高度，以像素計
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}
function drawScene() { // main drawScene function
//清空畫布
clear(); // clear canvas
// get current time
var date = new Date();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
hours = hours > 12 ? hours - 12 : hours;
var hour = hours + minutes / 60;
var minute = minutes + seconds / 60;
// save current context
ctx.save();
// draw clock image (as background)
ctx.drawImage(clockImage, 0, 0, 500, 500);
//translate() 方法重新映射畫布上的 (0,0) 位置。
ctx.translate(canvas.width / 2, canvas.height / 2);
//beginPath() 方法開始一條路徑，或重置當前的路徑。
ctx.beginPath();
// draw numbers
ctx.font = '36px Arial';
ctx.fillStyle = '#000';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
for (var n = 1; n <= 12; n++) {
var theta = n* (Math.PI * 2) / 12;//夾角π=180°
var x = clockRadius * 0.7 * Math.sin(theta);//x座標
var y = -clockRadius * 0.7 * Math.cos(theta);//y座標
ctx.fillText(n, x, y);
}
/*官網是這樣寫的，原因是座標右下方是正正區所以要n-3，要不然數字就亂了
for (var n = 1; n <= 12; n++) {
var theta = (n - 3) * (Math.PI * 2) / 12;
var x = clockRadius * 0.7 * Math.cos(theta);
var y = clockRadius * 0.7 * Math.sin(theta);
ctx.fillText(n, x, y);
}
*/
// draw hour
ctx.save();
var theta = (hour-3)* 2 * Math.PI / 12;
ctx.rotate(theta);//相差180°
ctx.beginPath();
//畫一條從起始位置到終點位置的線
ctx.moveTo(-15, -5);//開始位置(-15,-5)
ctx.lineTo(-15, 5);//到達位置(-15,5)
ctx.lineTo(clockRadius * 0.5, 1);//再畫一條終點位置在(clockRadius * 0.5, 1)的
ctx.lineTo(clockRadius * 0.5, -1);//再畫一條終點位置在(clockRadius * 0.5, -1)的
//大致出來了一個針的形狀
ctx.fill();//用顏色填充，默認黑色
//canvas.save();和canvas.restore();是兩個相互匹配出現的，
//作用是用來保存畫布的狀態和取出保存的狀態的。restore取出爲了避免後續的元素被影響到
ctx.restore();
// draw minute(同理)
ctx.save();
var theta = (minute-15) * 2 * Math.PI / 60;
ctx.rotate(theta);
ctx.beginPath();
ctx.moveTo(-15, -4);
ctx.lineTo(-15, 4);
ctx.lineTo(clockRadius * 0.8, 1);
ctx.lineTo(clockRadius * 0.8, -1);
ctx.fill();
ctx.restore();
// draw second(同理)
ctx.save();
var theta = (seconds-15) * 2 * Math.PI / 60;
ctx.rotate(theta);
ctx.beginPath();
ctx.moveTo(-15, -3);
ctx.lineTo(-15, 3);
ctx.lineTo(clockRadius * 0.9, 1);
ctx.lineTo(clockRadius * 0.9, -1);
ctx.fillStyle = '#0f0';//綠色
ctx.fill();
ctx.restore();
ctx.restore();
}
// initialization
$(function(){
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
// var width = canvas.width;
// var height = canvas.height;
clockImage = new Image();
clockImage.src = 'https://static.runoob.com/images/mix/125855_nnla_89964.png';
//setInterval() 方法可按照指定的週期（以毫秒計）來調用函數或計算表達式。
setInterval(drawScene, 1000); // loop drawScene
});
