Canvas Text API-制作钟表

一、效果图：

二、实现代码：

  <script>
    var canvas = document.getElementById("clock");
    var ctx = canvas.getContext("2d");
    var centerX = canvas.width / 2;
    var centerY = canvas.height / 2;
    var radius = canvas.width / 2 - 12;

    
    
    // 更新钟表指针的位置
function updateClock() {
// 获取当前系统时间
var now = new Date();
  var hour = now.getHours();
  var minute = now.getMinutes();
  var second = now.getSeconds();

  // 计算指针的角度
 var hourAngle = ((hour % 12) + minute / 60 + second / 3600) * Math.PI / 6 - Math.PI / 2;
  var minuteAngle = (minute + second / 60) * Math.PI / 30 - Math.PI / 2;
  var secondAngle = (second ) * Math.PI / 30 - Math.PI / 2;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
// 绘制底盘
ctx.beginPath();
    ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
    ctx.fillStyle = "#000";
    ctx.fill();
    
    // 绘制金色渐变圆环
    var gradient = ctx.createRadialGradient(centerX, centerY, radius * 0.6, centerX, centerY, radius);
    gradient.addColorStop(0, "rgb(255,255,255)");
    gradient.addColorStop(1, "rgb(179,162,61)");
    ctx.lineWidth = 5;
    ctx.strokeStyle = gradient;
    ctx.stroke();
    
    // 绘制白色空心圆环
    ctx.beginPath();
    ctx.arc(centerX, centerY, radius * 0.95, 0, 2 * Math.PI);
    ctx.lineWidth = 1.5;
    ctx.strokeStyle = "rgb(116,111,105)";
    ctx.stroke();
    ctx.beginPath();
    ctx.arc(centerX, centerY, radius * 0.9, 0, 2 * Math.PI);
    ctx.lineWidth = 1.5;
    ctx.strokeStyle = "rgb(116,111,105)";
    ctx.stroke();

    // 绘制分布均匀的点
    var pointRadius = 2;
    for (var i = 0; i < 60; i++) {
      var angle = i * Math.PI / 30;
      var length = radius * 0.925;
      var posX = centerX + length * Math.cos(angle);
      var posY = centerY + length * Math.sin(angle);
      ctx.beginPath();
      ctx.arc(posX, posY, pointRadius, 0, 2 * Math.PI);
      ctx.fillStyle = "rgb(194,185,128)";
      ctx.fill();
    }

    // 绘制罗马数字时刻
    ctx.font = "30px Georgia";
    ctx.fillStyle = "rgb(215,210,146)";
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    for (var i = 1; i <= 12; i++) {
      var angle = i * Math.PI / 6 - Math.PI / 2;
      var length = radius * 0.75;
      var posX = centerX + length * Math.cos(angle);
      var posY = centerY + length * Math.sin(angle);
      ctx.fillText(getRomanNumerals(i), posX, posY);
    }
ctx.font="28px 华文楷体";
ctx.fillStyle= "rgb(215,210,146)";
ctx.fillText("LONDON",centerX,centerY+70);
    // 绘制金色小圆环
    ctx.beginPath();
    ctx.arc(centerX, centerY, radius * 0.6, 0, 2 * Math.PI);
    ctx.strokeStyle = "rgb(209, 176, 98)";
    ctx.lineWidth = 4;
    ctx.stroke();

    // 绘制白色小圆圈
    ctx.beginPath();
    ctx.arc(centerX, centerY, radius * 0.55, 0, 2 * Math.PI);
    ctx.strokeStyle = "rgb(140, 138, 115)";
    ctx.lineWidth = 2;
    ctx.stroke();

   
    // 获取罗马数字表示
    function getRomanNumerals(num) {
      var romanNumerals = {
        1: "I",
        2: "II",
        3: "III",
        4: "IV",
        5: "V",
        6: "VI",
        7: "VII",
        8: "VIII",
        9: "IX",
        10: "X",
        11: "XI",
        12: "XII"
      };
      return romanNumerals[num];
    }
    // 绘制交点处的立体圆点
ctx.beginPath();
ctx.arc(centerX, centerY, 8, 0, 2 * Math.PI); // 圆心坐标为(centerX, centerY)，半径为10
ctx.fillStyle = "#fff"; // 设置圆点填充颜色
ctx.fill(); // 填充圆点
    // 绘制时针
  ctx.beginPath();
  ctx.moveTo(centerX, centerY);
  ctx.lineTo(centerX + radius * 0.4 * Math.cos(hourAngle), centerY + radius * 0.4 * Math.sin(hourAngle));
  ctx.lineWidth = 10;
  ctx.strokeStyle = "#fff";
  ctx.stroke();

  // 绘制分针
  ctx.beginPath();
  ctx.moveTo(centerX, centerY);
  ctx.lineTo(centerX + radius * 0.6 * Math.cos(minuteAngle), centerY + radius * 0.6 * Math.sin(minuteAngle));
  ctx.lineWidth = 6;
  ctx.strokeStyle = "#fff";
  ctx.stroke();

  // 绘制秒针
  ctx.beginPath();
  ctx.moveTo(centerX, centerY);
  ctx.lineTo(centerX + radius * 0.8 * Math.cos(secondAngle), centerY + radius * 0.8 * Math.sin(secondAngle));
  ctx.lineWidth = 2;
  ctx.strokeStyle = "#fff";
  ctx.stroke();

  // 每秒钟更新一次钟表
  setTimeout(updateClock, 1000);
}

// 启动钟表
updateClock();
    
  </script>