js实现时钟

// console.log(“number=” + number, “index=” + index);

var rad = 2 * pi / 12 * index;

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

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

ctx.textAlign = ‘center’;

// 让数字落在坐标的中心

ctx.textBaseline = ‘middle’;

ctx.fillStyle = “black”;

// 在坐标为(x,y)的地方绘制number

ctx.fillText(number, x, y);

});

//绘制刻度

var i;

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

var rad = (2 * pi / 60) * i;

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

// console.log(“x=” + x);

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

// console.log(“y=” + y);

ctx.beginPath();

// 开始绘制圆

ctx.arc(x, y, 2, 0, 2 * pi);

if (i % 5 == 0) {

ctx.fillStyle = “black”;

}

else {

ctx.fillStyle = “gray”;

}

ctx.fill();

}

}

// 绘制秒针

function drawsecond(ms) {

ctx.save();

// 清空子路径列表来启动新路径。

ctx.beginPath();

var rad = (2 * pi / 60)*(ms-15);

// 旋转画布

ctx.rotate(rad);

ctx.moveTo(-5,0);

ctx.lineTo(90,0);

ctx.lineWidth = 1;

ctx.strokeStyle = “red”;

ctx.lineCap = “round”;

ctx.stroke();

ctx.restore();

}

//绘制分针

function drawminute(minute) {

ctx.save();

// 清空子路径列表来启动新路径。

ctx.beginPath();

var rate=(2pi/60)(minute-15);

ctx.rotate(rate);

ctx.moveTo(0,0);

ctx.lineTo(70,0);

ctx.lineWidth = 2;

ctx.lineCap=“round”;

ctx.strokeStyle = “blue”;

ctx.stroke();

ctx.restore();

}

//绘制时针

function drawhour(hour, minute) {

// 清空子路径列表来启动新路径。

ctx.save();

ctx.beginPath();

//每小时弧度

var rad = (2 * pi/12)*(hour-3) ;

//每分钟弧度

var mrad = (2 * pi/12 / 60)*(minute-15);

// 对画布进行旋转

ctx.rotate(rad + mrad);

// 设置画布样式

ctx.lineWidth = 3;

ctx.lineCap = “round”;

ctx.strokeStyle = “black”;

ctx.moveTo(0,0);

ctx.lineTo(45,0);

ctx.stroke();

ctx.restore();

}

function start() {

ctx.clearRect(-250,-200, 500,400);

var time = new Date();

var hour = time.getHours();

console.log(hour);

var minute = time.getMinutes();

var second = time.getSeconds 《一线大厂Java面试题解析+后端开发学习笔记+最新架构讲解视频+实战项目源码讲义》无偿开源 威信搜索公众号【编程进阶路】 ();

console.log(second);

console.log(“second=”+second);

drawBackground();

drawTime();

drawhour(hour,minute);

drawminute(minute);

drawsecond(second);

}

start();

// 每1秒刷新一次

setInterval(start, 1000);