下面是编程之家 jb51.cc 通过网络收集整理的代码片段。

编程之家小编现在分享给大家，也给大家做个参考。

function init(){

clock();

setInterval(clock,1000);

}

function clock(){

var now = new Date();

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

ctx.save();

ctx.clearRect(0,150,150);

ctx.translate(75,75);

ctx.scale(0.4,0.4);

ctx.rotate(-Math.PI/2);

ctx.strokeStyle = "black";

ctx.fillStyle = "white";

ctx.lineWidth = 8;

ctx.lineCap = "round";

// Hour marks

ctx.save();

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

ctx.beginPath();

ctx.rotate(Math.PI/6);

ctx.moveTo(100,0);

ctx.lineTo(120,0);

ctx.stroke();

}

ctx.restore();

// Minute marks

ctx.save();

ctx.lineWidth = 5;

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

if (i%5!=0) {

ctx.beginPath();

ctx.moveTo(117,0);

ctx.lineTo(120,0);

ctx.stroke();

}

ctx.rotate(Math.PI/30);

}

ctx.restore();

var sec = now.getSeconds();

var min = now.getMinutes();

var hr = now.getHours();

hr = hr>=12 ? hr-12 : hr;

ctx.fillStyle = "black";

// write Hours

ctx.save();

ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )

ctx.lineWidth = 14;

ctx.beginPath();

ctx.moveTo(-20,0);

ctx.lineTo(80,0);

ctx.stroke();

ctx.restore();

// write Minutes

ctx.save();

ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )

ctx.lineWidth = 10;

ctx.beginPath();

ctx.moveTo(-28,0);

ctx.lineTo(112,0);

ctx.stroke();

ctx.restore();

// Write seconds

ctx.save();

ctx.rotate(sec * Math.PI/30);

ctx.strokeStyle = "#D40000";

ctx.fillStyle = "#D40000";

ctx.lineWidth = 6;

ctx.beginPath();

ctx.moveTo(-30,0);

ctx.lineTo(83,0);

ctx.stroke();

ctx.beginPath();

ctx.arc(0,10,Math.PI*2,true);

ctx.fill();

ctx.beginPath();

ctx.arc(95,true);

ctx.stroke();

ctx.fillStyle = "#555";

ctx.arc(0,3,true);

ctx.fill();

ctx.restore();

ctx.beginPath();

ctx.lineWidth = 14;

ctx.strokeStyle = '#325FA2';

ctx.arc(0,142,true);

ctx.stroke();

ctx.restore();

}

以上是编程之家(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。