html5做的太阳系
效果图:
源代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="canvas" width="1000" height="1000" style="background-color:black">
你的浏览器不支持canvas
</canvas>
<script type="text/javascript">
var canvas=document.getElementById("canvas");
var cxt=canvas.getContext('2d');
//轨道
function drawTrack(){
for(var i=0;i<8;i++){
cxt.beginPath();
cxt.strokeStyle="white";
cxt.arc(500,500,(i+1)*50,0,360,false);
cxt.stroke();
cxt.closePath();
}
}
drawTrack();
//星球
function Star(x,y,radius,cycle,scolor,ecolor){
//画出星球需要哪些属性
//星球的坐标点
this.x=x;
this.y=y;
//星球的半径
this.radius=radius;
//公转周期
this.cycle=cycle;
//星球的颜色
this.scolor=scolor;
this.ecolor=ecolor;
//新建一个渐变颜色空对象
this.color=null;
this.time=0;
//设置一个计时器
this.draw=function(){
cxt.save();
//重置0.0坐标点
cxt.translate(500,500);
//设置旋转角度
cxt.rotate(this.time*(360/this.cycle)*Math.PI/180);
cxt.beginPath();
cxt.strokeStyle="white";
cxt.arc(this.x,this.y,this.radius,0,360,false);
//设置星球颜色
//设置渐变颜色
this.color=cxt.createRadialGradient(this.x,this.y,0,this.x,this.y,this.radius);
this.color.addColorStop(0,this.scolor);
this.color.addColorStop(1,this.ecolor);
cxt.fillStyle=this.color;
//填充渐变颜色
//填充星球颜色
cxt.closePath();
cxt.fill();
cxt.restore();
this.time+=1;
}
}
//画星球
function Sun(){
Star.call(this,0,0,20,0,"#f00","#f90");
}
function Mercury(){
Star.call(this,0,-50,10,87.70,"#A69697","#5c3e40");
}
function Venus(){
Star.call(this,0,-100,10,224.701,"#c4bbac","#1f1315");
}
function Earth(){
Star.call(this,0,-150,10,365.224,"#78b1e8","#050c12");
}
function Mars(){
Star.call(this,0,-200,10,686.98,"#cec9b6","#76422d");
}
function Jupiter(){
Star.call(this,0,-250,10,686.98,"#c0a48e","#322222");
}
function Satrun(){
Star.call(this,0,-300,10,10759.5,"#f7f9e3","#5c4533");
}
function Uranus(){
Star.call(this,0,-350,10,30799.095,"#A7e1e5","#19243a");
}
function Neptune(){
Star.call(this,0,-400,10,60152,"#0661b2","#1e3b73");
}
var sun=new Sun();
var Mercury=new Mercury();
var Venus=new Venus();
var Earth=new Earth();
var Mars=new Mars();
var Jupiter=new Jupiter();
var Satrun=new Satrun();
var Uranus=new Uranus();
var Neptune=new Neptune();
function move(){
//清除画布
cxt.clearRect(0,0,1000,1000);
//画出轨道
drawTrack();
sun.draw();
Mercury.draw();
Venus.draw();
Earth.draw();
Mars.draw();
Jupiter.draw();
Satrun.draw();
Uranus.draw();
Neptune.draw();
}
//使各星球进行运动
setInterval( move,10);
</script>
</body>
</html>
转载于:https://www.cnblogs.com/cjh1/p/6617676.html
html5做的太阳系相关推荐
- html5 制作太阳系,html5做的太阳系
效果图: 源代码: 你的浏览器不支持canvas var canvas=document.getElementById("canvas"); var cxt=canvas.getC ...
- HTML5做手机站页面字体显示很小的解决方法
HTML5做手机站需要加上一部分代码,不然字体会显示很小的,经历了很久的不解才发现的,希望给大家一些帮助 <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD ...
- 一个html5页面,html5做一个黑板报页面
html5做一个黑板报页面 我们结合移动设备(手机和平板电脑)的特性,介绍HTML5中新增的语义化标签元素,以及在移动Web浏览器下Web页面布局的知识及例子. 在HTML5标准添加的新元素中,用于常 ...
- html网页设计板报,html5做一个黑板报页面
html5做一个黑板报页面 我们结合移动设备(手机和平板电脑)的特性,介绍HTML5中新增的语义化标签元素,以及在移动Web浏览器下Web页面布局的知识及例子. 在HTML5标准添加的新元素中,用于常 ...
- Python 用Ursina 3D引擎做一个太阳系行星模拟器
这次,我们再来用Ursina引擎来做一个太阳系行星模拟器吧! 想要了解Ursina 3D引擎的基本使用方法的话,查看我的另一篇文章: 手把手教你用Python编一个<我的世界> 1. 认识 ...
- Unity做一个太阳系
Unity做一个太阳系(适合初学者学习) 步骤 1.新建Unity项目(我用的unity2019) 2.在assets中建script文件夹,material文件夹. 2.创造9个sphere物体:太 ...
- flash能否制作html游戏,10件Flash可以做而HTML5做不了的事情
当苹果宣布其未来的设备上不再支持flash时候,你几乎可以听到集体的喘息声.就像是Monty Python的Holy Grail中的一个场景,为打算进入街道等车的flash设计师和开发人员提前敲响了钟 ...
- HTML5 canvas绘制太阳系各行星(包括月球的公转)
HTML5 canvas绘制太阳系 看了好多canvas绘制太阳系行星,他们都忽略了月亮,虽然月亮不是行星,但是绘图少了月亮也就没有挑战性了,今天我就计算了一下月亮的轨迹,然后按照公转的比例画了上 ...
- 直播手机视频app html5,html5做视频直播,iPhone不支持
html5做视频直播 Android可以获取到数据并发送到后台 iphone手机不支持 主要在这一块 navigator.getUserMedia 各位大神有什么好的办法能解决这个问题 if( doc ...
最新文章
- [转]【Git】rebase 用法小结
- 记一次mongoDB-@Document(collection = “XXX“)配置的探索
- ITK:在不复制内存的情况下为每个像素添加常量
- Linux命令【一】基本命令
- CCF推荐各种国际学术会议和期刊目录
- linux 将结果放入数组,linux-如何将值添加到bash数组?
- FPGA与CPLD的区别
- 猴子数据让你深刻了解微信富媒体
- java++ioutils,Java IOUtils.copy方法代码示例
- WPF界面设计辅助工具--Blend
- 网管维修必备工具_7手机维修必备工具
- pdf照片显示正常打印时被翻转_2020考研 | 准考证怎么打印你知道吗?
- 计算apk包的安装之后占用空间以及运行时占用内存
- C语言找n以上最小质数,[原创]求质数(C语言描述)
- 使用LL库开发STM32:UART基础使用
- 数据库系统概论练习4
- ros2 topic 源码解析
- 在recovery下挂载/system以使用adb
- ISO/IEC 27018公有云中个人身份信息管理体系认证概述
- oracle存储过程语法累加,Oracle 存储过程语法总结及练习