清华大佬耗费三个月吐血整理的几百G的资源，免费分享！....>>>
<!doctype html>
<html>
<head>
</head>
<body>
<canvas id="canvas" width="900" height="900" style="background:#ff9900"></canvas>
<script>
var canvas=document.getElementById('canvas');
var cxt=canvas.getContext('2d');
function shizhong() {
cxt.clearRect(0,0,900,900)
var now=new Date();
var sec=now.getSeconds();
var min=now.getMinutes();
var hour=now.getHours();
hour=hour+min/60;
hour=hour>12?hour-12:hour;
cxt.beginPath();
cxt.lineWidth=20;
cxt.strokeStyle="blue";
cxt.arc(300,400,300,0,360,false);
cxt.stroke();
cxt.closePath();
for(var i=0;i<12;i++){
cxt.save();
cxt.lineWidth="10";
cxt.strokeStyle="black";
cxt.translate(300,400);
cxt.rotate(i*30*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-220);
cxt.lineTo(0,-290);
cxt.stroke();
cxt.closePath();
cxt.restore();
}
for(var i=0;i<60;i++){
cxt.save();
cxt.lineWidth=5;
cxt.strokeStyle="black";
cxt.translate(300,400);
cxt.rotate(i*6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-270);
cxt.lineTo(0,-290);
cxt.closePath();
cxt.stroke();
cxt.restore();
}
cxt.save();
cxt.translate(300,400);
cxt.lineWidth=8;
cxt.strokeStyle="#000";
cxt.beginPath();
cxt.rotate(hour*30*Math.PI/180);
cxt.moveTo(0,-150);
cxt.lineTo(0,10);
cxt.closePath();
cxt.stroke();
cxt.restore();
cxt.save();
cxt.lineWidth=5;
cxt.strokeStyle="#000";
cxt.translate(300,400);
cxt.rotate(min*6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-180);
cxt.lineTo(0,10);
cxt.stroke();
cxt.closePath();
cxt.restore();
cxt.save();
cxt.lineWidth=2;
cxt.strokeStyle="red";
cxt.translate(300,400);
cxt.rotate(sec*6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-240);
cxt.lineTo(0,10);
cxt.stroke();
cxt.closePath();
cxt.restore();
}
setInterval(shizhong,1000);
</script>
</body>
</html>