闲着没事用html5写了一个canvas时钟。

[Crazywa]

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

还写了个WebSocket的聊天室，服务器端用PHP Socket写的，聊天表情部分服务器端传输暂时没有处理好，就不分享代码了。

[showenxxx]

呵呵 Fuck Internet Exploer

IE9已经开始支持了

楼主自己写的吗，挺厉害

[叶子]

不错 赞一个！

[Crazywa]

其实一开始想做的是一个canvas动画小库，先实现一个具体功能，然后再抽象出来动画需要的模块来。
看那个frameRate就能看出来。
所有新的动画对象模型都可以继承canvObject来扩展。
过两天有空的时候再抽象一下。

之前写过一个dom元素的动画小库，类似jQ的动画，自定义比jQ的要好一些，可惜公司做电子商务的，用不上，只能自己摆弄着玩了。

[zoujp_xyz]

html5 很不错。。。

[上海程序员3]

有没有在线看的地址？

[碧海情天-赵亮]

前些时候想研究一下HTML5的，但一想到研究与应用之间的距离，就没兴趣了。想学的东西太多，学哪一个都是舍弃了其余很多，所以只有马上可以应用的才是最合适去学的。时间和现实会让人觉得成熟也变得淡漠。

[碧海情天-赵亮]

时间和现实会让人变得成熟也变得淡漠。

[kaifadi]

[Quote=引用 8 楼 theforever 的回复:]

时间和现实会让人变得成熟也变得淡漠。
[/Quote]
+++++++++
人就是这样，一切都是因为虚荣心在做怪！最后都为了生活！

楼主的代码不错，挺一下！

[bhbhxy]

建议先判断浏览器是否支持getContext方法
不然在不支持html5的浏览器会出现脚本错误
if(element.getContext) {
var obj = element.getContext("2d");
}

[hch126163]

楼主牛人！厉害

[无·法]

效果不错啊，楼主！

跟我一起说："楼主，你好厉害!"

[madpc]

库最好能向flash靠拢， 支持缩放，旋转，翻转，嵌套，色彩混合，关键帧，坐标变换 ...

话说，做网页动画的ide已经有了，好像是 css3 为主实现的

[madpc]

还有 hitTest, 层次关系，碰撞。。。 都是非重要的东西

[老人与海]

[Quote=引用 11 楼 sysdzw 的回复:]

效果不错啊，楼主！

跟我一起说："楼主，你好厉害!"
[/Quote]
"楼主，你好厉害!"