HTML5 练手之二，一个能够为之圆心转动的圆球，原理和时钟的非常像，只是要把握转动的时间控制，同时加入了点渐变色



HTML5 练手之二，一个能够为之圆心转动的圆球，原理和时钟的非常像，只是要把握转动的时间控制，同时加入了点渐变色






 1 <!DOCTYPE HTML>

 2 <html>

 3 <head>

 4 <title>Sun</title>

 5 <style>

 6 #sun{

 7  background:black;

 8 }

 9 </style>

10 </head>

11 <body>

12 <canvas id="sun" width="1000" height="1000" >

13 您的浏览器不支持标签，无法看到时钟

14 </canvas>

15 </body>

16 <script>

17   var clock = document.getElementById("sun");

18   var cxt = clock.getContext("2d");

19     //生命一个时间函数

20     var time = 0;

21     function drawEarch(){

22   cxt.clearRect(0,0,1000,1000);

23   //轨道

24   cxt.strokeStyle = "#fff";

25   cxt.beginPath();

26   cxt.arc(500,500,100,0,360,false);

27   cxt.closePath();

28   cxt.stroke();

29   //太阳

30   cxt.beginPath();

31   cxt.arc(500,500,20,0,360,false);

32   //设置渐变颜色

33   var suncolor = cxt.createRadialGradient(500,500,0,500,500,20);

34   suncolor.addColorStop(0,"#f90");

35   suncolor.addColorStop(1,"red");

36   cxt.fillStyle = suncolor;

37   cxt.fill();

38   cxt.closePath();

39   //地球

40      //开启异次元空间

41       cxt.save();

42       cxt.beginPath();

43       cxt.lineWidth = 10;

44       cxt.strokeStyle="#f90";

45       //设置原点

46       cxt.translate(500,500);

47       //设置旋转角度

48       cxt.rotate(time*365/360*Math.PI/180);

49       cxt.arc(0,-100,10,0,360,false);

50       var earchcolor = cxt.createRadialGradient(0,-100,0,0,-100,10);

51       earchcolor.addColorStop(0,"#78B1E8");

52       earchcolor.addColorStop(1,"#050C12");

53       cxt.fillStyle = earchcolor;

54       cxt.closePath();

55       cxt.fill();

56       cxt.restore();

57      time +=1;

58     }

59

60

61         drawEarch;

62       setInterval(drawEarch,10);

75  </script>

76 </html>




												


											
H TML5 之 （3）转动的圆球的更多相关文章
	

    
								
  1. H TML5 之 （7） 俄罗斯方块效果
		
    下载是模拟的俄罗斯方法的效果,在下落的情况下,能 <!DOCTYPE HTML> <html> <head> <title>Shot</title ...
    
		
    2. 
						
  2. H TML5 之 （6）下雨效果
		
    在对HTML5进行研究之后,有了一点想法,思考出游戏其实感觉就是四个步骤 1.创建一个你需要的对象,赋予属性(一些影响方法的属性),方法(运动,叫....) 2.实例化这个对象,让它成为一个或者多个个 ...
    
		
    3. 
						
  3. H TML5 之 （5） 一个在线画图板
		
    这里加入了点难度了,增加了对HTML很多时间的把握,对象的把握 index.html <!DOCTYPE HTML> <html> <head> <title ...
    
		
    4. 
						
  4. H TML5 之 （4） 小项目一 时钟
		
    这里做一个HTML5 入门的练手,一个小时钟项目,可以再上面拓展很多,程序员培养的就是思想 <!DOCTYPE HTML> <html> <head> <ti ...
    
		
    5. 
						
  5. H TML5 之 （2） 小试牛刀
		
    基本的HTML都认识到了,就开始运用下了,大的程序的开始,都是从一个一个表达式慢慢的堆积起来的 想开始玩HTML5,就开始理解,它所提供的画布函数各有什么作用,API的具体使用,才能完成自己想要完成的 ...
    
		
    6. 
						
  6. H TML5 之 （1） 初识HTML5
		
    新特性 HTML5 中的一些有趣的新特性: 用于绘画的 canvas 元素 用于媒介回放的 video 和 audio 元素 对本地离线存储的更好的支持 新的特殊内容元素,比如 article.foo ...
    
		
    7. 
						
  7. 你应该知道的10个奇特的 HTML5 单页网站
		
    网页设计师努力寻找新的方式来展现内容.其中一个大的趋势是单页网站,现在被世界上的一些大的品牌广泛采用,使用它们来为用户提供一个快速,干净和简单的而且​​美丽的网站. 下面是10个令人惊叹的单页 H​​ ...
    
		
    8. 
						
  8. 值得 Web 开发人员收藏的16款 HTML5 工具
		
    HTML5 正在迅速改变创建和管理网站的方式.HTML5 在不同的领域让网页设计更强大的.快速,安全,响应式,互动和美丽,这些优点吸引更多的 Web 开发人员使用 HTML5 开发各种网站和应用程序. ...
    
		
    9. 
						
  9. JavaScript中的文档对象模型
		
    1. DOM基本介绍1 什么是DOMDOM的英语全称为Document Object Model,翻译成中文就 是文档对象模型.也就是说,将整个文档看作是一个对象.而一个文档又是由很多节点组成的, 那 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. IP处理函数inet_aton()和inet_ntoa()，inet_pton,inet_ntop
			
    inet_ntoa: 功能: 将一个IP转换成一个互联网标准点分格式的字符串. 原型: char FAR * inet_ntoa( struct in_addr in); 返回值: 如果正确,返回一个 ...
    
			
    2. 
						
  2. IPVS实现分析
			
    IPVS实现分析 IPVS实现分析 根据LVS官方网站的介绍,LVS支持三种负载均衡模式:NAT,tunnel和direct routing(DR). NAT是通用模式,所有交互数据必须通过均衡器:后 ...
    
			
    3. 
						
  3. 17.2.1 Replication Implementation Details  复制实现细节:
			
    17.2 Replication Implementation 复制是基于master server 跟踪所有改变到他的数据库(更新,删除等等)在它的binary log. binary log 作为 ...
    
			
    4. 
						
  4. Oracle体系结构图
			
    1 oracle数据库主要有数据文件database和数据库实例instance组成.用户通过用户进程链接到server process.在数据库启动的时候,需要依赖于参数文件parameter fi ...
    
			
    5. 
						
  5. Interviews3D: APlatform for Interactive Handing of Massive Data Sets 读后感
			
    横向比较: Inadequacy of current system design( 现代系统和一些软件的不足) 软件特点: Output sensitivity Out-of core data h ...
    
			
    6. 
						
  6. [洛谷U871]building
			
    题目来源:http://www.luogu.org/problem/show?pid=U871# [题目背景 Background] WOW是BLIZZARD公司开发的一款网络游戏,游戏的背景是处在一 ...
    
			
    7. 
						
  7. hdoj 1286 找新朋友【欧拉函数】
			
    找新朋友 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...
    
			
    8. 
						
  8. jsp中的forward和redirect的区别
			
    转自http://blog.163.com/tsing_hua/blog/static/139622224201101110836644/ 一.调用方式 我们知道,在servlet中调用转发.重定向的 ...
    
			
    9. 
						
  9. Mockito测试
			
    Mockito 一 mockito基本概念 Mock测试是单元测试的重要方法之一,而Mockito作为一个流行的Mock框架,简单易学,且有非常简洁的API,测试代码的可读性很高. Mock测试就是在 ...
    
			
    10. 
						
  10. JavaScript实现拖拽预览，AJAX小文件上传
			
    本地上传,提前预览(图片,视频) 1.html中div标签预览显示,button标签触发上传事件. <div  id="drop_area" style="bord ...
    
			
    11.