HTML5時鐘數字刻度代碼示例

使用HTML5的canvas繪制時鐘數字刻度的代碼示例：

<canvas id="clock" width="300" height="300"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("clock");
var ctx = canvas.getContext("2d");
var width = canvas.width;
var height = canvas.height;
var radius = width/2;
var fontSize = radius*0.15;
ctx.translate(radius, radius); //將畫布中心移到canvas元素中心
//繪制刻度線和數字
for (var i = 1; i<= 12; i++) {
var degree = i * 30 * Math.PI / 180;
ctx.rotate(degree);
ctx.beginPath();
ctx.moveTo(0, -radius*0.95);
ctx.lineTo(0, -radius*0.85);
ctx.stroke();
ctx.font = fontSize + "px Arial";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText(i, 0, -radius*0.75);
ctx.rotate(-degree);
}
</script>

以上代碼繪制的時鐘數字刻度包括12條刻度線和12個數字，每個刻度的角度是30度。其中，ctx.rotate(degree)表示將坐標系旋轉指定的角度，ctx.font指定字體樣式和大小，ctx.textAlign指定文字水平對齊方式，ctx.textBaseline指定文字垂直對齊方式。