HTML5手繪時鐘是一種用HTML5制作的數字時鐘，它通過使用HTML5畫布(Canvas)元素、JavaScript代碼和CSS樣式來實現。它能夠產生一個非常漂亮的時鐘效果，因此受到了很多網頁設計師和開發人員的青睞。
下面是一份簡單的HTML5手繪時鐘的代碼：
<!DOCTYPE html>
<html>
<head>
<title>HTML5手繪時鐘</title>
<style>
body {
background-color: #333;
}
canvas {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 20px #fff;
}
</style>
</head>
<body>
<canvas id="clock" width="400" height="400"></canvas>
<script>
var canvas = document.getElementById("clock");
var context = canvas.getContext("2d");
var radius = canvas.width / 2;
function drawClock() {
context.beginPath();
context.arc(radius, radius, radius-20, 0, 2*Math.PI);
context.fillStyle = "#fff";
context.fill();
context.strokeStyle = "#000";
context.lineWidth = 5;
context.stroke();
context.beginPath();
context.arc(radius, radius, 10, 0, 2*Math.PI);
context.fillStyle = "#000";
context.fill();
context.beginPath();
context.moveTo(radius, radius);
context.lineTo(radius + Math.cos(Math.PI/12*2)*150, radius + Math.sin(Math.PI/12*2)*150);
context.strokeStyle = "#000";
context.lineWidth = 5;
context.stroke();
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
hour = (hour % 12) || 12;
context.beginPath();
context.lineWidth = 10;
context.lineCap = "round";
context.strokeStyle = "#000";
context.moveTo(radius, radius);
context.lineTo(radius + Math.cos(Math.PI/6*(hour+minute/60))*100, radius + Math.sin(Math.PI/6*(hour+minute/60))*100);
context.stroke();
context.beginPath();
context.lineWidth = 5;
context.lineCap = "round";
context.strokeStyle = "#000";
context.moveTo(radius, radius);
context.lineTo(radius + Math.cos(Math.PI/30*minute)*130, radius + Math.sin(Math.PI/30*minute)*130);
context.stroke();
context.beginPath();
context.strokeStyle = "#f00";
context.lineWidth = 2;
context.arc(radius, radius, radius-25, -Math.PI/2, (Math.PI*2)*(second/60)-(Math.PI/2), false);
context.stroke();
}
drawClock();
setInterval(function() {
context.clearRect(0, 0, canvas.width, canvas.height);
drawClock();
}, 1000);
</script>
</body>
</html>代碼中使用了<canvas>元素來創建一個400像素×400像素的畫布，并定義了一個ID為"clock"。然后通過JavaScript獲取canvas對象，并使用getContext()方法來獲得一個畫布上下文對象，以便使用JavaScript代碼來繪制時鐘。漂亮的表盤和指針是通過使用canvas的API來實現的。
最后一個<script>標簽部分使用了setInterval()函數來讓時鐘每秒鐘更新一次。這個函數會以給定的間隔時間（以毫秒為單位，在這里是1000毫秒，即1秒）來調用一個函數。
結合使用HTML5畫布(Canvas)元素、JavaScript代碼和CSS樣式，我們可以創造出一些很酷的東西，包括這個時鐘效果。這對于網頁設計師和開發人員來說是非常有用的技能，可以為他們的網站和應用程序增加更多的價值。