HTML5中的畫布是一個非常有用的工具，可以在其中繪制各種圖形和動畫。在這里我們將展示如何用HTML5畫布繪制一個時鐘。

//獲取畫布并設置寬高
var canvas = document.getElementById("clock");
canvas.width = 300;
canvas.height = 300;
//獲取畫布上的2D繪圖上下文
var ctx = canvas.getContext("2d");
//繪制外圓
ctx.beginPath();
ctx.arc(150,150,140,0,2*Math.PI);
ctx.strokeStyle = "black";
ctx.lineWidth = 2;
ctx.stroke();
//繪制刻度
for(var i=1; i<=12; i++){
var angle = (i-3) * (Math.PI/6);
var x = 150 + Math.cos(angle) * 120;
var y = 150 + Math.sin(angle) * 120;
ctx.beginPath();
ctx.arc(x, y, 15, 0, 2*Math.PI);
ctx.fillStyle = "black";
ctx.fill();
}
//繪制指針
function drawHand(position, length, width){
var angle = (Math.PI*2) * (position/60) - (Math.PI/2);
var x = 150 + Math.cos(angle) * length;
var y = 150 + Math.sin(angle) * length;
ctx.beginPath();
ctx.lineWidth = width;
ctx.moveTo(150, 150);
ctx.lineTo(x, y);
ctx.stroke();
}
//繪制時針
function drawHour(hour,minute){
var position = (hour%12) + (minute/60);
drawHand(position, 60, 8);
}
//繪制分針
function drawMinute(minute){
var position = minute;
drawHand(position, 90, 5);
}
//繪制秒針
function drawSecond(second){
var position = second;
drawHand(position, 100, 2);
}
//觸發繪制函數
function drawClock(){
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
ctx.clearRect(0,0,300,300);
drawHour(hour,minute);
drawMinute(minute);
drawSecond(second);
}
setInterval(drawClock, 1000);

上面的代碼使用了HTML5畫布的基本繪圖函數，例如arc、fill、stroke等。我們還定義了三個函數用于繪制時針、分針和秒針，其中用到了手指的位置、長度和寬度信息。最后我們使用setInterval函數每秒鐘調用一次drawClock函數來更新時鐘。這就是用HTML5畫布繪制時鐘的全部過程。