网友Adam’分享HTML5学习笔记之Canvas时钟功能

作者：管理员

发布时间：2012/12/12 14:36:20

评论数：0

转载请自觉注明原文：http://www.jq-school.com/Show.aspx?id=194

文章由【网友Adam‘】提供

此文章主要分享了HTML5 Canvas实现时钟功能，效果跟真正的钟表一样，可以一秒一秒的转动，网友们运行的时候请不要用IE浏览，请使用主流的谷歌、火狐等浏览器，这样才可以看到最终效果。

 

使用代码如下：

window.onload = function(){	
	function Disk( o, x, y, r, z, b ){
		o.lineWidth = b;
		o.beginPath();
		for( var i = 0; i < 60; i += 1 ){
			o.moveTo( x, y );
			o.arc( x, y, r, z*i*Math.PI/180, z*( i + 1 )*Math.PI/180, false );
		};
		o.closePath();
		o["stroke"]();
	};
	
	function mark( o, x, y, r, sa, st, en, pre, b ){
		o.lineWidth = b;
		o.beginPath();
		o.moveTo( x, y );
		o.arc( x, y, r*sa, st, en, false );
		o.closePath();
		o[ pre ]();
	};
	
	function clock( o, x, y, r ){
		o.clearRect( 0, 0, 800, 600 );		
		var oDate = new Date(),
			h = ( -90 + oDate.getHours() * 30 ) *Math.PI/180,
			m = ( -90 + oDate.getMinutes() * 6 ) *Math.PI/180,
			s = ( -90 + oDate.getSeconds() * 6 ) *Math.PI/180,
			re = ( 90 + oDate.getSeconds() * 6 ) *Math.PI/180
		// 初始化
		mark( o, x, y, r, 1.12, 0, 360, "stroke", 1 );
		o.fillStyle = "white";
		mark( o, x, y, r, 1.11, 0, 360, "fill", 1 );
		
		Disk( o, x, y, r, 6, 1 );
		
		o.fillStyle = "white";
		mark( o, x, y, r, 0.96, 0, 360, "fill", 1 );
		
		Disk( o, x, y, r, 30, 4 );
		
		o.fillStyle = "white";
		mark( o, x, y, r, 0.92, 0, 360, "fill", 1 );
		
		// Reverse
		mark( o, x, y, r, 0.3, re , re , "stroke" ,1 );
		
		// seconds
		mark( o, x, y, r, 0.95, s , s , "stroke" ,1 );
		
		// minutes
		mark( o, x, y, r, 0.9, m, m, "stroke", 3 );
		
		// hours
		mark( o, x, y, r, 0.7, h, h, "stroke", 4 );
		
		o.fillStyle = "black";
		mark( o, x, y, r, 0.03, 0, 360, "fill" );
		
	};	
	var canvas = document.getElementById("c1").getContext("2d");
	
	setInterval( function(){
		clock( canvas, 400, 300, 200 );
	}, 1000 );
	
	clock( canvas, 400, 300, 200 );
};

 

页面代码如下：

<canvas id="c1" height="600" width="800">
	<span>浏览器版本太低</span>
</canvas>

 

效果如下：

 

 

 

关键字：HTML5 Canvas HTML5学习笔记 Canvas时钟功能