javascript - Canvas 时钟应从特定位置开始

Question

我想从特定位置启动时钟的秒针，比如在加载页面时 15 小时。

function drawTime(ctx, radius){
    now = new Date();
    second = now.getSeconds();
    second=(second*Math.PI/30);
    console.log(second);
    drawHand(ctx, second, radius*0.9, radius*0.02);
  }

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

Answer 1

我已将您的代码更改为使用任意时间和日期。通过 setInterval() 函数模拟时间的流逝。

我添加了一些评论，以便更容易理解正在发生的事情。

// The starting date. The date is arbitrary, the time is set to 15:00:00.
// .getTime() returns time in milliseconds, so it's easier to increment later on.
var currentTime = (new Date('2011-10-10T15:00:00')).getTime();

function drawTime(ctx, radius){
  var now = new Date(currentTime);
  var second = now.getSeconds();
  second = (second * Math.PI / 30);
  console.log(second);
  drawHand(ctx, second, radius * 0.9, radius * 0.02);
}

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

// Emulating the clock. 1000 milliseconds = 1 second.
setInterval(function() {
  currentTime += 1000; 
}, 1000);