柔软的canvas时钟

shawn.xie · 发表于 2013-1-4 03:04:57

本例是一个基于canvas的时钟，鼠标滑过的时候会有类似果冻的抖动效果！
代码如下：
<div class="cnblogs_code"><!doctype html><html><head><meta charset="utf-8"/><title>柔软的canvas时钟</title><style> #myCanvas{margin:50px auto;display:block;}</style></head><body><canvas id="myCanvas" width="200px" height="200px">您的破浏览器不支持canvas！</canvas><script type="text/javascript" src="js/jQuery.js"></script><script type="text/javascript" src="js/tween.js"></script><script>//设置全局变量var mycanvas=document.getElementById('myCanvas');var context=mycanvas.getContext('2d');window.onload=init;//init函数function init(){ context.translate(100,100);//改变中心位置 draw(); setInterval(draw,1000);}//draw函数function draw(){ context.clearRect(-150,-150,150,150); var time=new Date();//获取时间变量 var hour=(time.getHours()%12)*2*Math.PI/12; var minute=time.getMinutes()*2*Math.PI/60; var second=time.getSeconds()*2*Math.PI/60; context.beginPath();//绘制一个表盘 context.arc(0,0,100,0,2*Math.PI,false); var gradient = context.createRadialGradient(0,0,0,0,0,100); //设置圆形渐变色 gradient.addColorStop(0,'#0cf'); gradient.addColorStop(1,'#aef'); context.fillStyle=gradient; context.fill(); context.fillStyle='#fff'; context.textBaseline='top'; context.font="normal 14px sans-serif"; context.fillText('Canvas',-20,-60); context.strokeStyle="#fff";//画时针 context.lineWidth=5; context.rotate(hour); context.beginPath(); context.moveTo(0,10); context.lineTo(0,-50); context.stroke(); context.rotate(-hour); context.strokeStyle="#fff";//画分针 context.lineWidth=5; context.rotate(minute); context.beginPath(); context.moveTo(0,10); context.lineTo(0,-80); context.stroke(); context.rotate(-minute); context.strokeStyle="#fff";//画秒针 context.lineWidth=3; context.rotate(second); context.beginPath(); context.moveTo(0,10); context.lineTo(0,-90); context.stroke(); context.rotate(-second);}//柔软形变var t=null;function sk(){ var du=20; function a(){ var n=1; var d=10; var c=Math.abs(du)-1; if(c==-1) return; if(du>0){ c=-c; } c=c-du; var b=du; function aa(){ n++; if(n>d){ clearTimeout(t); a(); return; } du=Tween.Linear(n,b,c,d); $('#myCanvas').css('-webkit-transform','skew('+du+'deg)'); t=setTimeout(aa,17); } aa(); } a();}mycanvas.onmouseover=sk;</script></body></html>

		自动登录	找回密码
密码			立即注册