请问请有码源啊
其实最后一步没做！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
text-align: center;
margin-top:250px;
}
#clock{
border:1px solid #ccc;
}
</style>
</head>
<body>
<div>
<canvas id="clock" height="200px" width="200px"></canvas>
</div>
<script type="text/javascript " >
var dom=document.getElementById('clock');
var ctx=dom.getContext('2d');
var width=ctx.canvas.width;
var height=ctx.canvas .height ;
var r=width/2;
function drawbackgroud() {
ctx.save();
ctx.translate(r,r);
ctx.beginPath();
ctx.lineWidth=5;
ctx.arc(0,0,r-5,0,2*Math.PI,false);
ctx.stroke ();
var hournumbers=[3,4,5,6,7,8,9,10,11,12,1,2];
ctx.font ='18px-Arial';
ctx.textAlign="center";
ctx.textBaseline ="middle";
hournumbers.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.fillText(number,x,y);
});
for(var i=0;i<60;i++){
ctx.save();
var rad=2*Math.PI/60*i;
var x=Math.cos(rad)*(r-20);
var y=Math .sin(rad)*(r-20);
ctx.beginPath();
if(i%5===0){
ctx.fillStyle="#bb2623";
ctx.arc(x,y,3,0,2*Math.PI,false);}
else{ ctx.fillStyle="#ccc";
ctx.arc(x,y,2,0,2*Math.PI,false);}
ctx.fill();
ctx.restore();
}
for(var j=0;j<60;j++){
ctx.save();
var ra=2*Math.PI/60*j;
var t=Math.cos(ra)*(r-40);
var h=Math.sin(ra)*(r-40);
ctx.beginPath();
ctx.fillStyle="#463EBB";
ctx.arc(t,h,2,0,2*Math.PI,false);
ctx.fill();
ctx.restore();
}
//上面的一个for是自己瞎搞的。。。
}
function dawhouse(hour) {
ctx.save();
ctx.beginPath();
var rad=2*Math.PI/12*hour;
ctx.rotate(rad);
ctx.lineWidth =5;
ctx.lineCap ='round';
ctx.moveTo(0,10);
ctx.lineTo(0,-r/2+10);
ctx.stroke();
ctx.restore();
}
function dawfen(fen) {
ctx.save();
ctx.beginPath();
var rad=2*Math.PI/60*fen;
ctx.rotate(rad);
ctx.lineWidth =3;
ctx.lineCap ='round';
ctx.moveTo(0,15);
ctx.lineTo(0,-r/2);
ctx.strokeStyle="green";
ctx.stroke();
ctx.restore();
}
function dawscond(miao) {
ctx.save();
ctx.beginPath();
var rad=2*Math.PI/60*miao;
ctx.rotate(rad);
ctx.lineWidth =1.5;
ctx.lineCap ='round';
ctx.moveTo(-2,18);
ctx.lineTo(2,18);
ctx.lineTo(1,-r+18);
ctx.lineTo(-1,-r+18);
ctx.fill();
ctx.fillStyle="#8fbb27";
ctx.restore();
}
function derayuan() {
ctx.beginPath();
ctx.arc(0,0,4,0,2*Math.PI,false);
ctx.fill();
ctx.fillStyle="#c8cc5d";
}
function yud() {
ctx.clearRect(0,0,width,height);
var d=new Date();
var h=d.getHours();
var f=d.getMinutes();
var m=d.getSeconds();
drawbackgroud();
dawhouse(h);
dawfen(f);
dawscond(m);
derayuan();
ctx.restore();
}
setInterval(yud,1000);
</script>
</body>
</html>