移动web 绘图实时时间

您可以使用HTML5的Canvas元素和JavaScript来实现移动Web绘图实时显示时间。您可以在Canvas上绘制时钟的指针和刻度线，然后使用JavaScript获取当前时间并根据时间更新指针的位置。以下是一个基本的示例代码：

HTML部分：

<canvas id="myCanvas" width="200" height="200"></canvas>

JavaScript部分：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.9;

function drawClock() {
  ctx.beginPath();
  ctx.arc(0, 0, radius, 0, 2*Math.PI);
  ctx.fillStyle = "white";
  ctx.fill();
  
  drawNumbers();
  drawTime();
}

function drawNumbers() {
  var ang;
  var num;
  ctx.font = radius*0.15 + "px arial";
  ctx.textBaseline="middle";
  ctx.textAlign="center";
  for(num = 1; num < 13; num++){
    ang = num * Math.PI / 6;
    ctx.rotate(ang);
    ctx.translate(0, -radius*0.85);
    ctx.rotate(-ang);
    ctx.fillText(num.toString(), 0, 0);
    ctx.rotate(ang);
    ctx.translate(0, radius*0.85);
    ctx.rotate(-ang);
  }
}

function drawTime() {
  var now = new Date();
  var hour = now.getHours();
  var minute = now.getMinutes();
  var second = now.getSeconds();
  //hour
  hour=hour%12;
  hour=(hour*Math.PI/6)+
    (minute*Math.PI/(6*60))+
    (second*Math.PI/(360*60));
  drawHand(hour, radius*0.5, radius*0.07);
  //minute
  minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
  drawHand(minute, radius*0.8, radius*0.07);
  // second
  second=(second*Math.PI/30);
  drawHand(second, radius*0.9, radius*0.02);
}

function drawHand(pos, length, width) {
  ctx.beginPath();
  ctx.lineWidth = width;
  ctx.lineCap = "round";
  ctx.moveTo(0,0);
  ctx.rotate(pos);
  ctx.lineTo(0, -length);
  ctx.stroke();
  ctx.rotate(-pos);
}

setInterval(drawClock, 1000);

这个代码使用Canvas元素创建一个时钟，通过JavaScript获取当前时间并更新时钟指针的位置，最后使用setInterval函数每秒钟刷新一次时钟。您可以将Canvas元素的大小和样式调整为适合您的需求。