HTML5是一種支持多媒體元素的標準，其中包括了繪圖API，可以用它來繪制各種圖形，包括時鐘。下面是使用HTML5繪制時鐘的代碼，通過canvas元素的getContext方法獲取到繪圖環境。

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

首先，需要畫一個圓形，可以使用arc方法畫一個弧線，通過stroke方法填充線條顏色。下面的代碼將畫一個半徑為100px的圓形。

context.beginPath();
context.arc(150, 150, 100, 0, Math.PI * 2, false);
context.stroke();

接著，需要畫刻度線。同樣使用arc方法畫一條線，通過rotate方法改變繪圖環境的旋轉角度，依次畫出60條刻度。下面的代碼將畫60條刻度線。

for (var i = 0; i< 60; i++) {
context.beginPath();
context.moveTo(150,150);
context.lineTo(150,50);
context.stroke();
context.rotate(Math.PI / 30);
}

畫時分秒針同樣使用rotate方法，根據當前時間的小時、分鐘和秒數計算出針的旋轉角度，然后畫出相應的針。

// 畫時針
context.beginPath();
context.moveTo(150,150);
context.lineTo(150,85);
context.stroke();
context.rotate((hours * 30 + minutes / 2) * Math.PI / 180);
context.lineTo(150,30);
context.stroke();
context.rotate(-(hours * 30 + minutes / 2) * Math.PI / 180);
// 畫分針
context.beginPath();
context.moveTo(150,150);
context.lineTo(150,65);
context.stroke();
context.rotate(minutes * 6 * Math.PI / 180);
context.lineTo(150,20);
context.stroke();
context.rotate(-minutes * 6 * Math.PI / 180);
// 畫秒針
context.beginPath();
context.moveTo(150,150);
context.lineTo(150,40);
context.stroke();
context.rotate(seconds * 6 * Math.PI / 180);
context.lineTo(150,10);
context.stroke();
context.rotate(-seconds * 6 * Math.PI / 180);

以上就是使用HTML5繪制時鐘的代碼，通過HTML5的繪圖API可以實現很多有趣的效果。