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. UVA 10716 Evil Straw Warts Live(贪心）
			
    Problem D: Evil Straw Warts Live A palindrome is a string of symbols that is equal to itself when re ...
    
			
    2. 
						
  2. perl unload utf-8 oracle Wide character in print at unload_oracle.pl line 105.
			
    #!/usr/bin/perl use DBI; use Encode; my $dbName = 'oadb'; my $dbUser = 'vxspace'; my $dbUserPass = ' ...
    
			
    3. 
						
  3. 循环初练 for
			
    class Program    {        static void Main(string[] args)        {            while (true)           ...
    
			
    4. 
						
  4. 利用if else来运行咱们结婚吧
			
    static void Main(string[] args)        {            while (true)            {                string  ...
    
			
    5. 
						
  5. poj1741 bzoj2152
			
    树分治入门 poj1741是男人八题之一,经典的树分治的题目这里用到的是点分治核心思想是我们把某个点i作为根,把路径分为过点i和不过点i先统计过点i这样的路径数,然后在统计其子树中的答案,这样就不断地 ...
    
			
    6. 
						
  6. Azure 媒体服务的 RTMP 支持和实时编码器
			
    Cenk Dingiloglu Azure 媒体服务高级项目经理 直播流媒体目前已在公共预览版中提供,其中一项受支持的输入协议便是 RTMP.RTMP 是用于输入和分发包括直播流媒体在内的丰富媒体的一 ...
    
			
    7. 
						
  7. RatingBar设置显示星星个数
			
    RatingBar评分控件 项目中遇到问题 marker一下: 关于自定义以及遇到的出现模糊情况 多半是因为切得图除颜色外 不一致的原因 如果大小也不一样,(沃日) 问题是这样的: 我可以通过OnRa ...
    
			
    8. 
						
  8. 关于.ToList()： LINQ to Entities does not recognize the method ‘xxx’ method, and this method cannot be translated into a store expression.
			
    LINQ to Entities works by translating LINQ queries to SQL queries, then executing the resulting quer ...
    
			
    9. 
						
  9. substring 在C#,Javascript,SQL 中index开始值
			
    substring函数index参数在三个平台的开始值: 平台 index参数开始值 C# 0 Javascript 0 SQL 1
    
			
    10. 
						
  10. HDOJ/HDU 1256 画8(绞下思维~水题)
			
    Problem Description 谁画8画的好,画的快,今后就发的快,学业发达,事业发达,祝大家发,发,发. Input 输入的第一行为一个整数N,表示后面有N组数据. 每组数据中有一个字符和一 ...
    
			
    11.