效果图
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>canvas钟表_by http://www.sitejs.cn</title>
- <style>
- #c1{ background:-webkit-radial-gradient(#ccc,#930); display:block; margin:100px auto;}
- body{ background:#000;}
- </style>
- <script>
- function Rect(x,y,w,h,r){
- this.x=x;
- this.y=y;
- this.w=w;
- this.h=h;
- this.background='#36383a';
- this.borderColor='black';
- thisthis.originX=this.w/2;
- thisthis.originY=this.h/2;
- }
- Rect.prototype.draw=function(gd){
- gd.save();
- gd.beginPath();
- gd.translate(this.x,this.y);
- gd.rotate(d2a(this.r));
-
- gd.fillStyle=this.background;
- gd.strokeStyle=this.borderColor;
- gd.fillRect(-this.originX,-this.originY,this.w,this.h);
- gd.strokeRect(-this.originX,-this.originY,this.w,this.h);
-
- gd.closePath();
- gd.restore();
- }
- function d2a(n){
- return n*Math.PI/180;
- }
- function mouseInCicle(cx,cy,cr,x,y){
- var d=Math.sqrt(Math.pow(x-cx,2)+Math.pow(cy-y,2));
- return d<cr;
- }
- window.onload=function(){
- if(!/Chrom/g.test(navigator.userAgent)){alert('您的浏览器不支持此项功能，请您下载并安装chrome'); document.write('<a href="http://www.google.cn/chrome">下载chrome浏览器</a>');}
- var oC=document.getElementById('c1');
- var gd=oC.getContext('2d');
- var clockX=100,clockY=100,clockR=100,timer=null;
- var hour=new Rect(clockX,clockY,6,50);
- var min=new Rect(clockX,clockY,4,70);
- var sec=new Rect(clockX,clockY,2,90);
- hour.background='#111315';
- hour.borderColor='#111315';
- hour.originY=hour.h;
- min.background='#111315';
- min.borderColor='#111315';
- min.originY=min.h;
- sec.background='#111315';
- sec.borderColor='#111315';
- sec.originY=sec.h;
- oC.onmousedown=function(ev){
- if(!mouseInCicle(clockX,clockY,clockR,ev.offsetX,ev.offsetY))return;
- var disX=ev.clientX-clockX;
- var disY=ev.clientY-clockY;
- document.onmousemove=function(ev){
- var l=ev.clientX-disX;
- var t=ev.clientY-disY;
- ll=l<=105?105:l;
- tt=t<=105?105:t;
- ll=l>=690?690:l;
- tt=t>=490?490:t;
- clockX=l;
- clockY=t;
- tick();
- }
- document.onmouseup=function(){
- document.onmousemove=null;
- document.onmouseup=null;
- }
- return false;
- }
- function tick(){
- gd.clearRect(0,0,oC.width,oC.height);
- gd.save()
- gd.beginPath();
- gd.lineWidth='10';
- gd.shadowOffsetX='0';
- gd.shadowOffsetY='0';
- gd.shadowBlur='20';
- gd.shadowColor='#999999';
- gd.strokeStyle='#36383a';
- gd.arc(clockX,clockY,clockR,0,d2a(360));
- gd.stroke();
- gd.restore();
- hour.x=clockX;
- hour.y=clockY;
- min.x=clockX;
- min.y=clockY;
- sec.x=clockX;
- sec.y=clockY;
- var oDate=new Date();
- hour.r=oDate.getHours()*30;
- hour.draw(gd);
- min.r=oDate.getMinutes()*6;
- min.draw(gd);
- sec.r=oDate.getSeconds()*6;
- sec.draw(gd);
- gd.beginPath();
- gd.fillStyle='#424345';
- gd.arc(clockX,clockY,10,0,d2a(360));
- gd.fill();
-
- //四个表盘针
- gd.beginPath();
- var sTop=new Rect(clockX,clockY,3,5);
- var sBottom=new Rect(clockX,clockY,3,5);
- var sLeft=new Rect(clockX,clockY,5,3);
- var sRight=new Rect(clockX,clockY,5,3);
- sTop.originY=sTop.h+90;
- sTop.draw(gd);
-
- sBottom.originY=sTop.h-95;
- sBottom.draw(gd);
-
- sLeft.originX=sTop.w+90;
- sLeft.draw(gd);
-
- sRight.originX=sTop.w-92;
- sRight.draw(gd);
- gd.closePath();
-
- gd.font='20px 宋体';
- gd.fillText('http://www.sitejs.cn',300,520,500);
- gd.font='50px 黑体';
- gd.fillText('拖拽的试试……',220,580,500);
- }
- timer=setInterval(tick,1000);
- tick();
-
- }
- </script>
- </head>
- <body>
- <canvas id="c1" width="800" height="600">
- 您的浏览器不支持canvas!
- </canvas>
- </body>
- </html>
来自：http://www.w3cfuns.com
