- <!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>
- //该片段来自于http://www.codesnippet.cn/detail/111120137063.html
来源: http://www.codesnippet.cn/detail/111120137063.html