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

Crazywa 2011-03-13 08:24:46



<!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写的，聊天表情部分服务器端传输暂时没有处理好，就不分享代码了。

...全文

437 16 打赏收藏转发到动态举报

写回复

用AI写文章

16 条回复

切换为时间正序

请发表友善的回复…

发表回复

老人与海 2011-05-31

打赏
举报

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

效果不错啊，楼主！

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

madpc 2011-03-14

打赏
举报

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

madpc 2011-03-14

打赏
举报

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

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

无·法 2011-03-14

打赏
举报

效果不错啊，楼主！

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

hch126163 2011-03-14

打赏
举报

楼主牛人！厉害

bhbhxy 2011-03-14

打赏
举报

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

kaifadi 2011-03-14

打赏
举报

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

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

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

碧海情天-赵亮 2011-03-13

打赏
举报

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

碧海情天-赵亮 2011-03-13

打赏
举报

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

上海程序员3 2011-03-13

打赏
举报

有没有在线看的地址？

zoujp_xyz 2011-03-13

打赏
举报

html5 很不错。。。

Crazywa 2011-03-13

打赏
举报

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

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