移动web 绘图实时时间
时间: 2023-08-02 19:36:01 浏览: 79
你可以使用HTML5的Canvas元素和JavaScript来实现移动Web绘图并显示实时时间。具体来说,你可以在Canvas上绘制一个时钟并使用JavaScript定时器更新时钟的时间。以下是一个简单的示例代码:
HTML代码:
```
<canvas id="clock" width="200" height="200"></canvas>
```
JavaScript代码:
```
var canvas = document.getElementById("clock");
var context = canvas.getContext("2d");
function drawClock() {
// 获取当前时间
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
// 绘制表盘
context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
context.arc(canvas.width / 2, canvas.height / 2, 80, 0, 2 * Math.PI);
context.stroke();
// 绘制时针
context.save();
context.translate(canvas.width / 2, canvas.height / 2);
context.rotate(2 * Math.PI * (hours / 12 + minutes / 720 + seconds / 43200));
context.beginPath();
context.moveTo(0, 0);
context.lineTo(0, -50);
context.stroke();
context.restore();
// 绘制分针
context.save();
context.translate(canvas.width / 2, canvas.height / 2);
context.rotate(2 * Math.PI * (minutes / 60 + seconds / 3600));
context.beginPath();
context.moveTo(0, 0);
context.lineTo(0, -70);
context.stroke();
context.restore();
// 绘制秒针
context.save();
context.translate(canvas.width / 2, canvas.height / 2);
context.rotate(2 * Math.PI * seconds / 60);
context.beginPath();
context.moveTo(0, 0);
context.lineTo(0, -90);
context.stroke();
context.restore();
// 绘制数字
context.font = "20px Arial";
context.textAlign = "center";
context.textBaseline = "middle";
for (var i = 1; i <= 12; i++) {
var angle = 2 * Math.PI * i / 12 - Math.PI / 2;
var x = canvas.width / 2 + 60 * Math.cos(angle);
var y = canvas.height / 2 + 60 * Math.sin(angle);
context.fillText(i, x, y);
}
// 显示实时时间
var time = hours + ":" + minutes + ":" + seconds;
context.fillText(time, canvas.width / 2, canvas.height - 20);
}
setInterval(drawClock, 1000);
```
这段代码会在Canvas上绘制一个时钟,并在每秒钟更新一次时钟的时间。你可以根据自己的需求调整时钟的大小、位置和样式。