用HTML5 canvas写一个时钟

图片指针用ctx的drawImage可以实现
服务器君一共花费了142.494 ms进行了4次数据库查询,努力地为您提供了这个页面。
试试阅读模式?希望听取您的建议

HTML5足够强大实现很多功能,画一个时钟只是一个小玩意。图片指针用ctx的drawImage可以实现。至于兼容性问题,网上的解决方案已经很多了。这个东东是用来玩的,不是用来做应用的,学习下canvas API。

效果演示

如果你看不到演示效果,请使用支持HTML5的浏览器。

实现代码

<script type="text/javascript">
// <![CDATA[
	var time = new Date();
    var h = time.getHours();
    var m = time.getMinutes();
    var s = time.getSeconds(); 
    var weekday={0:'星期日',1:'星期一',2:'星期二',3:'星期三',4:'星期四',5:'星期五',6:'星期六'};
    h=h>12?(h-12)*5+parseInt(m/12):h*5+parseInt(m/12); //时针 初始位置
    //=====================================
    var x=200,y=200,sAngle=0; //x y 原点 秒针角度变量
    function draw()
	{
    	var c=document.getElementById("myCanvas");
    	var ctx=c.getContext("2d");
     	ctx.clearRect(0,0,c.width,c.height);
     	s++;//秒针
     	//背景
    	ctx.fillStyle = '#eee'       // Make changes to the settings  
    	ctx.globalAlpha = 0.8; 
    	ctx.fillRect(0,0,c.width,c.height);   // Draw a rectangle with new settings  
		//===填充(表明)原点===
		ctx.beginPath();
		ctx.arc(x,y,4,8,true);
		ctx.fill();
		ctx.closePath();
		var grd=ctx.createLinearGradient(x,y,50,350);
		grd.addColorStop(0,"#FF0000");
		grd.addColorStop(0.5,"#00FF00");
		grd.addColorStop(1,"#0000FF");
		ctx.fillStyle=grd;
		ctx.font = "20pt Arial"; 
		ctx.fillText("html5",50,350);
		ctx.save();
    	// 时间刻度
    	for(var i=0;i<60;i++)
		{
         	var angle=(Math.PI*2)/60;
         	ctx.beginPath();
         	var b=i==0||i==15||i==30||i==45 
         	if(i%5==0){
             	if(b){
              		ctx.fillStyle="red";
              		radius=6;
             	}
				else{
              		ctx.fillStyle="blue";
              		radius=4.5;
             	}
         		ctx.font="12px Arial";
         		ctx.fillText(i/5==0?12:i/5,x-5,y-80); //x大-右 小-左 y大小 数字刻度
         	}
			else
			{
         		ctx.fillStyle="#000";
             	radius=2;
         	}
         	if(s==i)radius=radius+1;
         	ctx.arc(x,y-100,radius,10,true);
         	ctx.fill();
         	transform(ctx,x,y,angle,true);                
     	}
     	ctx.restore();
     	//==========================
     	sAngle=(Math.PI*2)/60*s; //秒度
     	ctx.save(); //时针
     	ctx.fillStyle="red";
		//   ctx.strokeStyle="red";
     	ctx.lineWidth=2;
     	transform(ctx,x,y,(Math.PI*2)/60*h,true); 
     	sj(ctx,x,y,x-8,y-30,x+8,y-45);
     	ctx.restore();
		 ctx.save();//分针转动
		 ctx.fillStyle="blue";
		 ctx.lineWidth=2;
		 transform(ctx,x,y,(Math.PI*2)/60*m,true); 
		 sj(ctx,x,y,x-10,y-50,x+10,y-65);
		 ctx.restore();
		 //秒针转动
		 ctx.save();
		 ctx.fillStyle="#000";
		 transform(ctx,x,y,sAngle,true);  
		 sj(ctx,x,y,x-5,y-70,x+5,y-80);
		 ctx.restore();  
     	//数据整理
    	if(s%60==0){
			sAngle=0,s=0,m++;
        	if(m==0){ //每十二分 时针旋转一次
            	if(m!=0)h++;
            	if(m%60==0)m=0;
        	}
     		if(h%60==0)h=0;    
    	};   
		//*注:如果是放到外面 判断分针或时针转动 则满足条件时 都重复会运行 原因 每执行一遍 只有秒针 在时刻变动  *//
     	var dateString=time.getFullYear()+"年"+(time.getMonth()+1)+"月"+time.getDate()+"日 "+weekday[time.getDay()]+" h:"+time.getHours()+" m:"+m+" s:"+s;
     	document.getElementById("d").innerHTML=dateString;
 	}
 
 	//指针三角!
 	function sj(ctx,x,y,x1,y1,x2,y2){
		//====例====
	
		//     ctx.beginPath();
		//     ctx.moveTo(x,y);
		//     ctx.lineTo(x,y-30);
		//     ctx.stroke();
		//     ctx.beginPath();
		//    
		//     ctx.moveTo(x-10,y-30);
		//     ctx.lineTo(x+10,y-30);
		//     ctx.lineTo(x,y-30-10);
		//     ctx.fill();
     	ctx.beginPath();
     	ctx.moveTo(x,y);
     	ctx.lineTo(x,y1);
     	ctx.stroke();
     	ctx.beginPath();
     	ctx.moveTo(x1,y1);
     	ctx.lineTo(x2,y1);
     	ctx.lineTo(x,y2);
     	ctx.fill();
 	}
 //据坐标旋转
 	function transform(ctx,x,y,angle,b){
  		if(b){// 顺时针
     		ctx.transform(Math.cos(angle), Math.sin(angle), 
        	-Math.sin(angle), Math.cos(angle), 
        	x*(1-Math.cos(angle)) + x*Math.sin(angle), 
      	 	y*(1-Math.cos(angle)) - y*Math.sin(angle))
     	}
  	}
	//=====每秒执行============(执行事件自选)
	window.setInterval(function(){draw()},1000);
	// window.onload=function(){ //效果同上
	// setInterval("draw()",1000);
	// };
	// ]]>
</script>

本文地址:http://www.nowamagic.net/librarys/veda/detail/1656,欢迎访问原出处。

不打个分吗?

转载随意,但请带上本文地址:

http://www.nowamagic.net/librarys/veda/detail/1656

如果你认为这篇文章值得更多人阅读,欢迎使用下面的分享功能。
小提示:您可以按快捷键 Ctrl + D,或点此 加入收藏

大家都在看

阅读一百本计算机著作吧,少年

很多人觉得自己技术进步很慢,学习效率低,我觉得一个重要原因是看的书少了。多少是多呢?起码得看3、4、5、6米吧。给个具体的数量,那就100本书吧。很多人知识结构不好而且不系统,因为在特定领域有一个足够量的知识量+足够良好的知识结构,系统化以后就足以应对大量未曾遇到过的问题。

奉劝自学者:构建特定领域的知识结构体系的路径中再也没有比学习该专业的专业课程更好的了。如果我的知识结构体系足以囊括面试官的大部分甚至吞并他的知识结构体系的话,读到他言语中的一个词我们就已经知道他要表达什么,我们可以让他坐“上位”毕竟他是面试官,但是在知识结构体系以及心理上我们就居高临下。

所以,阅读一百本计算机著作吧,少年!

《Python在Unix和Linux系统管理中的应用》 Noab Gift (作者), Jeremy M.Jones (作者)

《Python在Unix和Linux系统管理中的应用(影印版)》作者们还构建了一个可以免费下载的Ubuntu虚拟机。该虚拟机包含了这《Python在Unix和Linux系统管理中的应用(影印版)》的源代码,还可以用来运行书中的实例,包括SNMP、IPython、SQLAlchemy和许多其他工具。《Python在Unix和Linux系统管理中的应用》展示了Python语言如何提供一种更加高效的方式来处理Unix和Linux服务器管理工作中的各种任务。《Python在Unix和Linux系统管理中的应用(影印版)》的每一章都会提出一个特定的管理问题,例如并发或数据备份,然后通过实际的例子提供基于Python的解决方案。

更多计算机宝库...