用HTML5 Canvas绘制时钟

以下是使用HTML5 Canvas绘制一个简单时钟的示例代码：




<!DOCTYPE html>
<html>
<head>
<title>Canvas Clock</title>
<style>
canvas {
    border:1px solid #000;
}
</style>
</head>
<body onload="startClock()">
<canvas id="clockCanvas" width="400" height="400"></canvas>
 
<script>
function startClock() {
    var canvas = document.getElementById('clockCanvas');
    var ctx = canvas.getContext('2d');
 
    // 清除画布
    ctx.clearRect(0, 0, canvas.width, canvas.height);
 
    // 获取当前时间
    var now = new Date();
    var sec = now.getSeconds();
    var min = now.getMinutes();
    var hr  = now.getHours();
    hr = hr>=12 ? hr-12 : hr;
 
    // 绘制时钟背景
    ctx.fillStyle = 'black';
    ctx.beginPath();
    ctx.arc(200, 200, 190, 0, 2 * Math.PI);
    ctx.fill();
 
    // 绘制时针、分针、秒针
    drawHand(hr, min, sec, 10, 150, ctx); // 小时
    drawHand(min, sec, 0, 15, 180, ctx); // 分钟
    drawHand(sec, 0, 0, 7, 200, ctx);   // 秒钟
}
 
function drawHand(handValue, handMove, handStand, handWidth, handStart, ctx) {
    ctx.save();
    ctx.lineWidth = handWidth;
    ctx.beginPath();
    ctx.translate(200, 200);
    ctx.rotate(handValue * (2 * Math.PI / 60) + (handMove * (2 * Math.PI / 3600))); // 转动分钟和秒钟
    ctx.rotate(-Math.PI/2); // 调整起点到顶部
    ctx.beginPath();
    ctx.moveTo(0, handStart);
    ctx.lineTo(0, handStart - handWidth * 10);
    ctx.stroke();
    ctx.restore();
}
 
// 使用setInterval每秒更新时钟
setInterval(startClock, 1000);
</script>
</body>
</html>

这段代码首先定义了一个startClock函数，它会被onload事件触发，并且每隔一秒由setInterval触发一次。函数中，首先获取当前时间，然后计算出小时、分钟和秒钟的角度，并调用drawHand函数绘制时针、分针和秒针。每个针的宽度和起始位置都不同。最后，使用setInterval每隔一秒重绘一次画布，以显示动态时钟。

用HTML5 Canvas绘制时钟

评论已关闭

推荐阅读