为何时钟做好了之后，其获取的时间竟和系统时间不一致，这是怎么回事？

window.onload = function(){

var canvas = document.getElementById('clock');

var ctx = canvas.getContext('2d');

var width = ctx.canvas.width;

var height = ctx.canvas.height;

var r = width / 2;

//画圆,画60个小圆点,写12个数字

function drawCircle(){

ctx.save();

// 画圆

ctx.translate(r,r);

ctx.beginPath();

ctx.arc(0,0,r - 5,0,2 * Math.PI,false);

ctx.lineWidth = 10;

ctx.stroke();

// 画60个小圆点

for(var i = 0;i < 60;i ++){

var rad = 2 * Math.PI / 60 * i;

var x = Math.cos(rad) * (r - 15);

var y = Math.sin(rad) * (r - 15);

ctx.beginPath();

if(i % 5 === 0){

ctx.fillStyle = 'black';

}else{

ctx.fillStyle = 'darkgray';

}

ctx.arc(x,y,2,0,2 * Math.PI,false);

ctx.fill();

}

// 写12个数字

var Arr = [3,4,5,6,7,8,9,10,11,12,1,2];

Arr.forEach(function(number,i){

var rad = 2 * Math.PI / 12 * i;

var x = Math.cos(rad) * (r - 30);

var y = Math.sin(rad) * (r - 30);

ctx.font = '18px Arial';

ctx.textAlign = 'center';

ctx.textBaseline = 'middle';

ctx.fillStyle = 'black';

ctx.fillText(number,x,y);

});

}

// drawCircle();

// 画时针

function drawHour(hour,minute){

ctx.save();

ctx.beginPath();

ctx.lineWidth = 5;

ctx.lineCap = 'round';

var rad = 2 * Math.PI / 12 * hour;

var mrad = 2 * Math.PI / 12 / 60 * minute;

ctx.rotate(rad + mrad);

ctx.moveTo(0,10);

ctx.lineTo(0, -r / 2);

ctx.stroke();

ctx.restore();

}

// drawHour(4,30);

// 画分针

function drawMinute(minute){

ctx.save();

ctx.beginPath();

ctx.lineWidth = 3;

ctx.lineCap = 'round';

var rad = 2 * Math.PI / 60 * minute;

ctx.rotate(rad);

ctx.moveTo(0,10);

ctx.lineTo(0,-r + 30);

ctx.stroke();

ctx.restore();

}

// drawMinute(30);

// 画分针

function drawSecond(second){

ctx.beginPath();

ctx.fillStyle = '#D02100';

var rad = 2 * Math.PI / 60 * second;

ctx.rotate(rad);

ctx.moveTo(-1,-r + 18);

ctx.lineTo(-2, 18);

ctx.lineTo(2, 18);

ctx.lineTo(1, -r + 18);

ctx.fill();

}

// drawSecond(15);

// 画固定的圆点

function drawDot(){

ctx.beginPath();

ctx.fillStyle = '#fff';

ctx.arc(0,0,3,0,2 * Math.PI,false);

ctx.fill();

}

// drawDot();

// 设置时间间隔,使时钟上的时间不断更新,和系统时间保持一致

function draw(){

ctx.clearRect(0,0,width,height);

var now = new Date();

var hour = now.getHours();

var minute = now.getHours();

var second = now.getSeconds();

drawCircle();

drawHour(hour,minute);

drawMinute(minute);

drawSecond(second);

drawDot();

ctx.restore();

}

draw();

setInterval(draw,1000);

}