用canvas写一个时钟
时间: 2023-08-10 19:02:21 浏览: 70
当然可以!以下是使用 Canvas 绘制一个简单的时钟的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Canvas 时钟</title>
<style>
#clockCanvas {
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas id="clockCanvas" width="200" height="200"></canvas>
<script>
function drawClock() {
var canvas = document.getElementById('clockCanvas');
var context = canvas.getContext('2d');
var radius = canvas.height / 2;
context.translate(radius, radius);
radius = radius * 0.9;
setInterval(function() {
drawFace(context, radius);
drawNumbers(context, radius);
drawTime(context, radius);
}, 1000);
}
function drawFace(context, radius) {
var grad;
context.beginPath();
context.arc(0, 0, radius, 0, 2 * Math.PI);
context.fillStyle = 'white';
context.fill();
grad = context.createRadialGradient(0, 0, radius * 0.95, 0, 0, radius * 1.05);
grad.addColorStop(0, '#333');
grad.addColorStop(0.5, 'white');
grad.addColorStop(1, '#333');
context.strokeStyle = grad;
context.lineWidth = radius * 0.1;
context.stroke();
context.beginPath();
context.arc(0, 0, radius * 0.1, 0, 2 * Math.PI);
context.fillStyle = '#333';
context.fill();
}
function drawNumbers(context, radius) {
var angle;
var num;
context.font = radius * 0.15 + 'px arial';
context.textBaseline = 'middle';
context.textAlign = 'center';
for (num = 1; num < 13; num++) {
angle = num * Math.PI / 6;
context.rotate(angle);
context.translate(0, -radius * 0.85);
context.rotate(-angle);
context.fillText(num.toString(), 0, 0);
context.rotate(angle);
context.translate(0, radius * 0.85);
context.rotate(-angle);
}
}
function drawTime(context, radius) {
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
// 对时、分、秒进行角度转换
hour = hour % 12;
hour = (hour * Math.PI / 6) + (minute * Math.PI / (6 * 60)) + (second * Math.PI / (360 * 60));
drawHand(context, hour, radius * 0.5, radius * 0.07);
minute = (minute * Math.PI / 30) + (second * Math.PI / (30 * 60));
drawHand(context, minute, radius * 0.8, radius * 0.07);
second = (second * Math.PI / 30);
drawHand(context, second, radius * 0.9, radius * 0.02);
}
function drawHand(context, pos, length, width) {
context.beginPath();
context.lineWidth = width;
context.lineCap = 'round';
context.moveTo(0, 0);
context.rotate(pos);
context.lineTo(0, -length);
context.stroke();
context.rotate(-pos);
}
drawClock();
</script>
</body>
</html>
```
你可以将这段代码保存为 HTML 文件并在浏览器中打开,就可以看到一个实时的时钟效果。希望这能帮到你!如果还有其他问题,请随时提问。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)