您的位置：首页 > 其它

柔软的canvas时钟

2012-07-03 14:12 155 查看

本例是一个基于canvas的时钟，鼠标滑过的时候会有类似果冻的抖动效果！

代码如下：

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航