一个Canvas时钟特效演示代码,Css代码库,德仔网

代码语言
代码分类
【Css】一个Canvas时钟特效演示
作者:Dezai.CN / 发布于2012/8/8/ 733
时钟特效演示
<div><!DOCTYPE html>
<html>
<head>
<title>canvas时钟</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
</head>
<body>
<canvas id="canvas" width="200" height="200" style="border:1px solid #000;">您的浏览器不支持Canvas。</canvas>
<script type="text/javascript" language="javascript" charset="utf-8">
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
if(ctx){
 var timerId;
 var frameRate = 60;
 function canvObject(){
 this.x = 0;
 this.y = 0;
 this.rotation = 0;
 this.borderWidth = 2;
 this.borderColor = '#000000';
 this.fill = false;
 this.fillColor = '#ff0000';
 this.update = function(){
 if(!this.ctx)throw new Error('你没有指定ctx对象。');
 var ctx = this.ctx
 ctx.save();
 ctx.lineWidth = this.borderWidth;
 ctx.strokeStyle = this.borderColor;
 ctx.fillStyle = this.fillColor;
 ctx.translate(this.x, this.y);
 if(this.rotation)ctx.rotate(this.rotation * Math.PI/180);
 if(this.draw)this.draw(ctx);
 if(this.fill)ctx.fill();
 ctx.stroke();
 ctx.restore();
 }
 };
 function Line(){};
 Line.prototype = new canvObject();
 Line.prototype.fill = false;
 Line.prototype.start = [0,0];
 Line.prototype.end = [5,5];
 Line.prototype.draw = function(ctx){
 ctx.beginPath();
 ctx.moveTo.apply(ctx,this.start);
 ctx.lineTo.apply(ctx,this.end);
 ctx.closePath();
 };

 function Circle(){};
 Circle.prototype = new canvObject();
 Circle.prototype.draw = function(ctx){
 ctx.beginPath();
 ctx.arc(0, 0, this.radius, 0, 2 * Math.PI, true);
 ctx.closePath();
 };

 var circle = new Circle();
 circle.ctx = ctx;
 circle.x = 100;
 circle.y = 100;
 circle.radius = 90;
 circle.fill = true;
 circle.borderWidth = 6;
 circle.fillColor = '#ffffff';

 var hour = new Line();
 hour.ctx = ctx;
 hour.x = 100;
 hour.y = 100;
 hour.borderColor = "#000000";
 hour.borderWidth = 10;
 hour.rotation = 0;
 hour.start = [0,20];
 hour.end = [0,-50];

 var minute = new Line();
 minute.ctx = ctx;
 minute.x = 100;
 minute.y = 100;
 minute.borderColor = "#333333";
 minute.borderWidth = 7;
 minute.rotation = 0;
 minute.start = [0,20];
 minute.end = [0,-70];

 var seconds = new Line();
 seconds.ctx = ctx;
 seconds.x = 100;
 seconds.y = 100;
 seconds.borderColor = "#ff0000";
 seconds.borderWidth = 4;
 seconds.rotation = 0;
 seconds.start = [0,20];
 seconds.end = [0,-80];

 var center = new Circle();
 center.ctx = ctx;
 center.x = 100;
 center.y = 100;
 center.radius = 5;
 center.fill = true;
 center.borderColor = 'orange';

 for(var i=0,ls=[],cache;i<12;i++){
 cache = ls[i] = new Line();
 cache.ctx = ctx;
 cache.x = 100;
 cache.y = 100;
 cache.borderColor = "orange";
 cache.borderWidth = 2;
 cache.rotation = i * 30;
 cache.start = [0,-70];
 cache.end = [0,-80];
 }

 timerId = setInterval(function(){
 // 清除画布
 ctx.clearRect(0,0,200,200);
 // 填充背景色
 ctx.fillStyle = 'orange';
 ctx.fillRect(0,0,200,200);
 // 表盘
 circle.update();
 // 刻度
 for(var i=0;cache=ls[i++];)cache.update();
 // 时针
 hour.rotation = (new Date()).getHours() * 30;
 hour.update();
 // 分针
 minute.rotation = (new Date()).getMinutes() * 6;
 minute.update();
 // 秒针
 seconds.rotation = (new Date()).getSeconds() * 6;
 seconds.update();
 // 中心圆
 center.update();
 },(1000/frameRate)|0);
}else{
 alert('您的浏览器不支持Canvas无法预览.\n跟我一起说："Fuck Internet Exploer!"');
}
</script>
</body>
</html></div>
试试其它关键字
　Canvas时钟　
同语言下
可能有用的
Dezai.CN贡献的其它代码(4037)