p5.js开发模拟时钟如何在表盘周边添加1-12数字刻度

直接替换原有绘制点状刻度的代码块即可，不需要复杂计算，核心是利用和指针一致的角度换算逻辑定位1-12的数字位置。

核心实现逻辑 #

• 12个小时数字均匀分布在表盘上，相邻数字间隔30度（360°/12=30°）
• 角度计算统一减去HALF_PI，把默认从右侧（3点钟方向）开始的0度基准偏移到顶部（12点钟方向），和时钟指针的角度逻辑保持一致
• 文字设置居中对齐，避免数字位置偏移
• 数字放置半径略小于秒针半径，防止和秒针、表盘边缘重叠

修改后完整代码 #

let cx, cy;
let secondsRadius;
let minutesRadius;
let hoursRadius;
let clockDiameter;
// 数字刻度半径配置
let numberRadius;

function setup() {
  createCanvas(800, 800);
  let radius= min(width,height)/2;
  secondsRadius=radius*0.71;
  minutesRadius = radius*0.6;
  hoursRadius = radius*0.5;
  // 数字位置比秒针稍靠内，避免重叠
  numberRadius = secondsRadius * 0.9;

  clockDiameter = radius*1.7;
  cx = width/2;
  cy = height/2;
}

function draw() {
  background("pink");

  noStroke();
  fill(244, 122, 158);
  ellipse(cx, cy, clockDiameter + 25, clockDiameter + 25);
  fill("green");
  ellipse(cx,cy,clockDiameter, clockDiameter);
 
  let s = map(second(), 0, 60, 0, TWO_PI) - HALF_PI;
  let m = map(minute() + norm(second(), 0, 60), 0, 60, 0, TWO_PI) - HALF_PI;
  let h = map(hour() + norm(minute(), 0, 60), 0, 24, 0, TWO_PI *2) - HALF_PI;
 
  stroke(255);
  strokeWeight(1);
  line(cx, cy, cx + cos(s) * secondsRadius, cy + sin(s) * secondsRadius);
  strokeWeight(2);
  line(cx, cy, cx + cos(m) * minutesRadius, cy + sin(m) * minutesRadius);
  strokeWeight(4);
  line(cx, cy, cx + cos(h) * hoursRadius, cy + sin(h) * hoursRadius);

  // ========== 替换原有点状刻度，绘制数字刻度 ==========
  noStroke();
  fill(255);
  textAlign(CENTER, CENTER);
  textSize(32);
  for (let i = 1; i <= 12; i++) {
    let angle = radians(i * 30) - HALF_PI;
    let x = cx + cos(angle) * numberRadius;
    let y = cy + sin(angle) * numberRadius;
    text(i, x, y);
  }

  // 需要保留分钟/秒钟小刻度可打开下方注释
  // stroke(255);
  // strokeWeight(1);
  // for (let a = 0; a < 360; a += 6) {
  //   let angle = radians(a) - HALF_PI;
  //   let x1 = cx + cos(angle) * secondsRadius;
  //   let y1 = cy + sin(angle) * secondsRadius;
  //   let x2 = cx + cos(angle) * (secondsRadius - 8);
  //   let y2 = cy + sin(angle) * (secondsRadius - 8);
  //   line(x1, y1, x2, y2);
  // }
  // ========== 刻度绘制结束 ==========
}

可调参数说明 #

• 调整numberRadius的乘数可以修改数字距离表盘中心的距离
• 修改textSize(32)里的数值可以调整数字大小
• 如果需要区分整点/分钟刻度的样式，只需要在刻度循环里判断角度是否为30的倍数，分别设置不同长度/粗细的线条即可

内容的提问来源于stack exchange，提问作者TGK Technology