HTML5地区自转代码

 1 <!doctype html>
 2   <meta charset="UTF-8">
 3   <html>
 4    <body>
 5      <!--创建canvas标签-->
 6      <!--canvas标签中的宽高不能设置在stlye里面否则不好定位x.y-->
 7      <canvas id="canvas" width="500" height="500" style="background:#666">
 8       您的浏览器不支持canvas标签
 9      </canvas>
10      <script>
11        var canvas=document.getElementById('canvas');
12        //创建2d绘画环境
13        var cxt=canvas.getContext('2d');
14        //声明一个时间参数(1:1天)
15        var time=0;
16      function draw(){
17        //清除画布(清除之前的内容 重新画)
18        cxt.clearRect(0,0,500,500);
19        //画行星轨道
20        cxt.strokeStyle="#fff";
21        cxt.beginPath();
22        cxt.arc(250,250,120,0,360,false);
23        cxt.closePath();
24        cxt.stroke();
25
26        //画地球轨道
27        cxt.strokeStyle="#fff";
28        cxt.beginPath();
29        cxt.arc(250,250,100,0,360,false);
30        cxt.closePath();
31        cxt.stroke();
32        //画太阳
33        //重置0,0点
34
35        cxt.strokeStyle="red";
36        cxt.lineWidth=1;
37        cxt.beginPath();
38        cxt.arc(250,250,20,0,360,false);
39        cxt.closePath();
40        //太阳需要填充颜色
41        //设置填充颜色(渐变色)
42        var grd=cxt.createRadialGradient(250,250,0,250,250,20);
43            grd.addColorStop(0,"#EEF920");
44            grd.addColorStop(1,"RED");
45            cxt.fillStyle=grd;
46        cxt.fill();
47        //需要在异次元空间保存所有画布
48         cxt.save();
49        //重置00点
50        cxt.translate(250,250);
51        //画地球
52        //设置选择弧度
53        //cxt.rotate(90*Math.PI/190);
54        //地球公转一周需要365天，time=1天 一天转365/360度
55        cxt.rotate(time*365/360*Math.PI/190);
56        cxt.beginPath();
57        cxt.arc(0,-100,10,0,360,false);
58        cxt.closePath();
59        //设置一下地球的颜色
60        var grd=cxt.createRadialGradient(0,-100,0,0,-100,10);
61            grd.addColorStop(0,"#78B1E8");
62            grd.addColorStop(1,"#050C12");
63            cxt.fillStyle=grd;
64        cxt.fill();
65
66        //画行星
67        cxt.rotate((time*0.5)*365/360*Math.PI/190);
68        cxt.beginPath();
69        cxt.arc(0,-120,10,0,360,false);
70        cxt.closePath();
71        //设置一下行星的颜色
72        var xrd=cxt.createRadialGradient(0,-100,0,0,-100,10);
73            xrd.addColorStop(0,"#78B1E8");
74            grd.addColorStop(1,"#050C12");
75            cxt.fillStyle=xrd;
76        cxt.fillStyle=grd;
77        cxt.fill();
78       cxt.restore();
79
80
81        time +=1;
82      }
83      //使地球动起来
84       setInterval(draw,100);
85      </script>
86
87    </body>
88   </html>

效果图：

转载于:https://www.cnblogs.com/leeten/p/3479677.html

HTML5地区自转代码相关推荐

html5编写网页代码_freeCodeCamp.org的未来-从向世界传授语言到编写代码的5年经验...
html5编写网页代码 freeCodeCamp went live in October 2014. In the five years since, we've done quite a bit. ...
点击链接微信html代码怎么写,html5微信分享代码怎么写呢?
html5微信分享代码怎么写呢?现在很多人都在微信好友或者朋友圈分享一下内容和别的有趣的文章或图片,但是你们知道分享的这些内容是怎样生成的吗?这些内容代码是怎样的呢?下面小编就给大家介绍一下关于 ht ...
HTML5基础之代码入门
HTML5基础之代码入门 2016-11-12 15:24 515人阅读评论(0) 收藏举报分类: HTML & HTML5(13) 作者同类文章 X 版权声明:本文为博主原创文章,如需 ...
php 选择地区查找,地区编码查询_php根据ip查询所在地区的代码
摘要腾兴网为您分享:php根据ip查询所在地区的代码,中信金通,盈益云,熊猫视频,湘税社保等软件知识,以及游戏通用窗口化工具,史诗战争补丁,荣威车友会,开机引导,兴化农商行,修改手机mac地址,问道 ...
html5页面弹幕代码,html5新年许愿文字弹幕代码
特效描述:html5 新年许愿文字弹幕代码.html5文字弹幕代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 HTML5手机视频弹幕文字评论代码 #audio_btn{ posit ...
按洲分组国家地区标准代码
最近需要做个功能,就是把订单按洲来分组,就是亚洲非洲什么的一般我们会用国家地区标准代码,详情请参考ISO标准但是 ,洲和国家地区标准代码的关系表我可是没找到,只好自己一个个归类,繁琐啊,记下来,方 ...
HTML5网页在线代码编辑器源码适用各类项目代码在线编辑
介绍: HTML5网页在线代码编辑器,代码高亮显示,输入代码爆炸动态效果显示. 如果谁改造一下运行功能,那基本可以做一个在线编辑运行软件引流了网盘下载地址: http://kekewl.net/wu ...
html酷炫电子时钟效果,Html5时钟特效代码
Html5时钟特效代码html> 时钟 canvas{display: block;margin: 0 auto;} 抱歉,您的浏览器不支持canvas画布 var myCanvas=docum ...
拼图游戏代码html5,HTML5拼图游戏代码.doc
HTML5拼图游戏代码 sliding.html 拼图游戏拼图游戏简单困难返回菜单 Sliding.jsvar context = document.getElementById('puzzl ...

HTML5地区自转代码

HTML5地区自转代码相关推荐

最新文章

热门文章