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. mysql  区间锁 对于没有索引 非唯一索引  唯一索引 各种情况
			
    The locks are normally next-key locks that also block inserts into the "gap" immediately b ...
    
			
    2. 
						
  2. git图示所有分支的历史
			
    1.第一种方法 git gui 菜单栏上 repository-->visual all branch history 或者直接使用命令gitk --all 2.在git bash中,使用命令查 ...
    
			
    3. 
						
  3. Oracle正则表达式
			
       Oracle正则表达式 正则表达式具有强大.便捷.高效的文本处理功能.能够添加.删除.分析.叠加.插入和修整各种类型的文本和数据.Oracle从10g开始支持正则表达式. 下面通过一些例子来说明 ...
    
			
    4. 
						
  4. bzoj1487
			
    还是仙人掌,和1023一样的考虑方法比1023简单但比1040难环形dp的处理方法和1040一样 type node=record po,next:longint; end; ..,..] of lo ...
    
			
    5. 
						
  5. bzoj1197
			
    水题,画个图推一下低维的就什么都明白了 从低维类推高维 ..,..] of int64; n,m,j,i:longint; begin readln(m,n); to n do f[i,]:=; to ...
    
			
    6. 
						
  6. Asp.Net 前后台交互小结
			
    转自:http://blog.csdn.net/wlccomeon/article/details/17270427 一.前台调用后台           前台调用后台的方法一共可分为两大类:使用Ht ...
    
			
    7. 
						
  7. （转载）JavaScript中的Window窗口对象
			
    (转载)http://www.ijavascript.cn/jiaocheng/javascript-window-65.html 例子: <html> <head> < ...
    
			
    8. 
						
  8. android学习——eclipse的svn的搭建
			
    一.svn 的在线安装 下面为在线安装SVN插件. 以下是一些关键步骤: 其中http://subclipse.tigris.org/update_1.8.x是SVN插件的下载站点[subclipse ...
    
			
    9. 
						
  9. Android学习笔记1：Activity与View
			
    推荐一系列优秀的Android开发源码 Activity是Android应用中负责与用户交互的组件. View组件是所有UI控件.容器控件的基类,View组件就是Android应用中用户实实在在看到的 ...
    
			
    10. 
						
  10. OpenCL memory object 之 传输优化
			
    转载自:http://www.cnblogs.com/mikewolf2002/archive/2011/12/18/2291741.html 首先我们了解一些优化时候的术语及其定义: 1.defer ...
    
			
    11.