畫布時鐘應該從特定位置開始

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);