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. VS2013 取消 直接单击文件 然后直接打开
			
    工具——选项——
    
			
    2. 
						
  2. linux 下 select 编程
			
    linux 下的 select 知识点 unp 的第六章已经描述的很清楚,我们这里简单的说下 select 的作用,并给出 select 的客户端实例.我们知道 select 是IO 多路复用的一个最 ...
    
			
    3. 
						
  3. WP e-Commerce WordPress Payment Gateways Caller插件本地文件包含漏洞
			
    漏洞名称: WP e-Commerce WordPress Payment Gateways Caller插件本地文件包含漏洞 CNNVD编号: CNNVD-201310-642 发布时间: 2013 ...
    
			
    4. 
						
  4. Delphi  TcxTreeList 怎么设置分组
			
    Delphi 的TcxTreeList控件设置按种类分组,操作如下: 1. 在TcxTreeList控件中双击,打开 Bands 属性,在这里面建需要分的组,在Captions->Text 输入 ...
    
			
    5. 
						
  5. jQuery技术内幕预览版.pdf1
			
    第一章 总体构架 jQuery模块可以分为3部分:入口模块.底层支持模块和功能模块 浏览器功能测试模块提供了针对不同浏览器功能和bug的测试结果,其它模块基于测试结果解决浏览器之间的兼容性问题 回调函 ...
    
			
    6. 
						
  6. Bzoj 2789: [Poi2012]Letters  树状数组,逆序对
			
    2789: [Poi2012]Letters Time Limit: 20 Sec  Memory Limit: 128 MBSubmit: 278  Solved: 185[Submit][Stat ...
    
			
    7. 
						
  7. ASP.NET中设置一个定时器来定时更新 转
			
    asp.net 定时器 比较少用,  中国红木网这是一个相当实用的功能,有了RSS博客镜像,就不需要在多处同时发布博客日志了.比如你同时在新浪上有自己的博客,又同时有自己的个人博客站点,那么你只需要在 ...
    
			
    8. 
						
  8. eclipse安装Hadoop1.1.2版本开发插件
			
    Hadoop1.1.2版本没有直接适合Eclipse的安装插件,需要手动打包jar文件. 我的系统配置: VMware Workstation10 CentOS-6.5-i386 hadoop-1.1 ...
    
			
    9. 
						
  9. 是C太傻逼?还是C++不够傻逼;
			
    1,类对象宏object-like macro,类函数宏macro中不允许有空格,名称遵循变量名命名规则; 同样是笔记,顺序条理无,看管随意,意在与神会,不解释则会意此为深,随意则会意此乃为度...望 ...
    
			
    10. 
						
  10. tar打包和解压命令
			
    如果你有一个大文件 想下载下来 但是又太大 可以压缩一下 然后打包 #压缩 tar -czvf ***.tar.gz tar -cjvf ***.tar.bz2 #解压缩 tar -xzvf ***. ...
    
			
    11.