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. bzoj1899
			
    显然如果只有一个窗口,是一道贪心的题目,直接让吃饭慢的排在前面即可 两个窗口的话,我们还是根据这个原则 先对吃饭时间降序排序,然后这是一个dp 假如设当前处理到第i个人,当在窗口1的打饭时间确定了,窗 ...
    
			
    2. 
						
  2. Linux命令行及Vim简单学习记录
			
    Linux命令行 1.打开命令行 Ctrl+Alt+t 2.目录 显示当前目录的文件列表 ls 跳转至当前目录中的x文件夹 cd x 返回根目录 cd 3.文件 新建文件1.cpp touch ./1 ...
    
			
    3. 
						
  3. BZOJ1935: [Shoi2007]Tree 园丁的烦恼
			
    1935: [Shoi2007]Tree 园丁的烦恼 Time Limit: 15 Sec  Memory Limit: 357 MBSubmit: 552  Solved: 220[Submit][ ...
    
			
    4. 
						
  4. linux gcc 编译时头文件和库文件搜索路径
			
    一.头文件    gcc 在编译时寻找所需要的头文件 :    ※搜寻会从-I开始    ※然后找gcc的环境变量 C_INCLUDE_PATH,CPLUS_INCLUDE_PATH,OBJC_INC ...
    
			
    5. 
						
  5. I Hate It HDOJ---1754
			
    I Hate It Time Limit: 9000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total S ...
    
			
    6. 
						
  6. 大白书 209                     remember the word
			
    F - Remember the Word Time Limit:3000MS     Memory Limit:0KB     64bit IO Format:%lld & %llu Sub ...
    
			
    7. 
						
  7. HDU-2568                前进
			
    http://acm.hdu.edu.cn/showproblem.php?pid=2568 前进 Time Limit: 2000/1000 MS (Java/Others)    Memory L ...
    
			
    8. 
						
  8. 基于WCF大型分布式系统的架构设计
			
    在大型系统中应用中,一个架构设计较好的应用系统,其总体功能肯定是由很多个功能模块所组成的,而每一个功能模块所需要的数据对应到数据库中就是一个或多个表.而在架构设计中,各个功能模块相互之间的交互点 越统 ...
    
			
    9. 
						
  9. java的IO学习，字节流与字符流的编码讲解
			
    字节流与字符流 字节流可以处理所有类型的数据(图片.视频等),在java中对应的类都为“stream”结尾 1字节=8位二进制=具体存储空间   字符流仅能处理纯文本的数据,在java中对应的类都是以 ...
    
			
    10. 
						
  10. hdoj 3785 寻找大富翁【优先队列+sort排序】
			
    寻找大富翁 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submi ...
    
			
    11.