- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title > 锤子时钟 </title>
- <meta name="Keywords" content="">
- <meta name="author" content="@my_programmer">
- <style type="text/CSS">
- body{ background:#a1a1a1;}
- .canvas_box{ position:fixed; left:50%; margin-left:-200px; top:50%; margin-top:-200px;}
- </style>
- <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
- <script>
- var width=10;
- var w= Math.round(Math.random()*width);
- </script>
- </head>
- <body>
- <div class="canvas_box"><canvas id="canvas" width="400" height="400"></canvas></div>
- <script>
- var num=0;
- window.onload=Close;
- function Close()
- {
- var deg=2*Math.PI/12;
- var canvas = document.getElementById('canvas');
- var ctx=canvas.getContext("2d");
- ctx.save();
- ctx.fillStyle="#a1a1a1";
- ctx.fillRect(0,0,400,400);
- ctx.beginPath();
- ctx.moveTo(10,10);
- ctx.lineTo(400,10);
- ctx.lineTo(400,200);
- ctx.lineTo(10,200);
- ctx.closePath();
- var x=20;
- var y=20;
- var w=360;
- var h=360;
- var r=100;
- // 圆角矩形
- ctx.save();
- ctx.save();
- ctx.shadowBlur=5;
- ctx.shadowColor="#656565";
- ctx.shadowOffsetX=0;
- ctx.shadowOffsetY=4;
- ctx.beginPath();
- ctx.moveTo(x + r, y);
- ctx.arcTo(x + w, y, x + w, y + h, r);
- ctx.arcTo(x + w, y + h, x, y + h, r);
- ctx.arcTo(x, y + h, x, y, r);
- ctx.arcTo(x, y, x + w, y, r);
- var f_jb=ctx.createRadialGradient(200,200,0,200,200,200);
- f_jb.addColorStop("0.5","#ffffff");
- f_jb.addColorStop("1","#ededed");
- ctx.strokeStyle="#f8f8f8";
- ctx.closePath();
- ctx.fillStyle=f_jb;
- ctx.stroke();
- ctx.fill();
- ctx.restore();
- // 内阴影
- ctx.shadowBlur=8;
- ctx.shadowColor="#414141";
- ctx.shadowOffsetX=0;
- ctx.shadowOffsetY=-6;
- ctx.beginPath();
- ctx.moveTo(w+x,h-r);
- ctx.arcTo(x + w, y + h, x, y + h, r);
- ctx.arcTo(x, y + h, x, y, r);
- ctx.lineWidth=1;
- var x_jb=ctx.createLinearGradient(0,300,0,360);
- x_jb.addColorStop("0","#c3b3b3");
- x_jb.addColorStop("1","#f2f2f2");
- ctx.strokeStyle=x_jb;
- ctx.lineCap="round";
- ctx.stroke();
- // 内圆
- ctx.shadowBlur=10;
- ctx.shadowColor="#8f8f8f";
- ctx.shadowOffsetX=0;
- ctx.shadowOffsetY=0;
- ctx.strokeStyle="#ffffff";
- var yjb=ctx.createLinearGradient(0,0,0,150);
- yjb.addColorStop("0","#636363");
- yjb.addColorStop("1.0","#414141");
- ctx.beginPath();
- ctx.arc(200,200,150,0,2*Math.PI);
- ctx.stroke();
- ctx.fillStyle=yjb;
- ctx.fill();
- ctx.closePath();
- // 圆内阴影
- ctx.globalAlpha=0.1;
- var yjb=ctx.createRadialGradient(200,200,0,200,200,200);
- yjb.addColorStop("0","#ffffff");
- yjb.addColorStop("1.0","#000000");
- ctx.beginPath();
- ctx.arc(200,200,150,0,2*Math.PI);
- ctx.stroke();
- ctx.fillStyle=yjb;
- ctx.fill();
- ctx.closePath();
- ctx.globalAlpha=1;
- // 数字
- ctx.translate(200,200);
- ctx.beginPath();
- for(var i=1;i<13;i++){
- var x1=Math.sin(i*deg);
- var y1=-Math.cos(i*deg);
- ctx.fillStyle="#fff";
- ctx.font="bold 20px Arial";
- ctx.textAlign='center';
- ctx.textBaseline='middle';
- ctx.fillText(i,x1*130,y1*130);
- }
- ctx.restore();
- // 转针开始
- ctx.strokeStyle="#f8f8f8";
- var time=new Date();
- var hours=(time.getHours()%12)*2*Math.PI/12;
- var m=time.getMinutes()*2*Math.PI/60;
- var s=time.getSeconds()*2*Math.PI/60;
- //alert(time.getHours());
- // 时针
- x=-10;
- y=-70;
- w=20;
- h=80;
- r=10;
- //h + m/12 + s/720
- ctx.translate(200,200);
- ctx.save();
- ctx.rotate(hours + m/12 + s/720);
- ctx.shadowBlur=5;
- ctx.shadowColor="#313131";
- ctx.shadowOffsetX=2;
- ctx.shadowOffsetY=2;
- ctx.beginPath();
- ctx.moveTo(x + r, y);
- ctx.arcTo(x + w, y, x + w, y + h, r);
- ctx.arcTo(x + w, y + h, x, y + h, r);
- ctx.arcTo(x, y + h, x, y, r);
- ctx.arcTo(x, y, x + w, y, r);
- ctx.stroke();
- ctx.closePath();
- ctx.fillStyle="#ffffff";
- ctx.fill();
- ctx.restore();
- //// 分针
- x=-10;
- y=-100;
- w=20;
- h=100;
- r=10;
- //ctx.translate(200,200);m+s/60
- ctx.save();
- ctx.rotate(m+s/60);
- ctx.shadowBlur=5;
- ctx.shadowColor="#313131";
- ctx.shadowOffsetX=2;
- ctx.shadowOffsetY=2;
- ctx.beginPath();
- ctx.moveTo(x + r, y);
- ctx.arcTo(x + w, y, x + w, y + h, r);
- ctx.arcTo(x + w, y + h, x, y + h, r);
- ctx.arcTo(x, y + h, x, y, r);
- ctx.arcTo(x, y, x + w, y, r);
- ctx.stroke();
- ctx.closePath();
- ctx.fillStyle="#ffffff";
- ctx.fill();
- ctx.restore();
- // 针上小圆
- ctx.save();
- ctx.shadowBlur=5;
- ctx.shadowColor="#313131";
- ctx.shadowOffsetX=0;
- ctx.shadowOffsetY=0;
- ctx.beginPath();
- ctx.arc(0,0,15,0,2*Math.PI);
- ctx.stroke();
- ctx.fillStyle="#fff";
- ctx.fill();
- ctx.closePath();
- ctx.restore();
- // 秒针
- x=-30;
- y=-2;
- w=140;
- h=4;
- r=1;
- ctx.save();
- ctx.rotate(s);
- ctx.shadowBlur=5;
- ctx.shadowColor="#313131";
- ctx.shadowOffsetX=2;
- ctx.shadowOffsetY=2;
- ctx.beginPath();
- ctx.arcTo(x + w, y, x + w, y + h, r);
- ctx.arcTo(x + w, y + h, x, y + h, r);
- ctx.arcTo(x, y + h, x, y, r);
- ctx.arcTo(x, y, x + w, y, r);
- ctx.stroke();
- ctx.closePath();
- ctx.fillStyle="#c15b4f";
- ctx.fill();
- ctx.restore();
- // 小红圆
- ctx.save();
- ctx.shadowBlur=3;
- ctx.shadowColor="#313131";
- ctx.shadowOffsetX=2;
- ctx.shadowOffsetY=2;
- ctx.beginPath();
- ctx.arc(0,0,7,0,2*Math.PI);
- ctx.stroke();
- ctx.fillStyle="#c15b4f";
- ctx.fill();
- ctx.closePath();
- ctx.restore();
- ctx.restore();
- setTimeout(Close,1000);
- }
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/article/16827/cd441844dcef601400ce7de2f3be3eec.html