canvas做太阳系怎样才能让地球绕着太阳转

提问网友发布时间：2022-04-20 09:20

声明：本网页内容为用户发布，旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。
E-MAIL:1656858193@qq.com

共2个回答

懂视网回答时间：2022-05-12 12:12

这篇文章主要介绍了html5使用canvas绘制太阳系效果,需要的朋友可以参考下：

<canvas id="canvas" width="1000" height="1000" style="background-color: #000;"></canvas>

代码如下:

var canvas=document.getElementById("canvas");
var cxt=canvas.getContext("2d");

function DrawTrack(){
for(var i=0;i<8;i++){
cxt.beginPath();
cxt.arc(500,500,(i+1)*50,0,360,false);
cxt.closePath();
cxt.strokeStyle="#fff";
cxt.stroke();
}
}
function DrawStart(x,y,radius,cycle,sColor,eColor){
//画出星球需要哪些属性

//星球的坐标点
this.x=x;
this.y=y;
//星球的半径
this.radius=radius;
//星球的颜色(开始色,结束色)
this.sColor=sColor;
this.eColor=eColor;
//创建一个渐变色空对象
this.color=null;
this.time=0;
//公共周期
this.cycle=cycle;
this.draw=function(){
cxt.save();
cxt.translate(500,500);
//设置旋转角度
cxt.rotate(this.time*360/this.cycle*Math.PI/180);
cxt.beginPath();
cxt.arc(this.x,this.y,this.radius,0,360,false);
cxt.closePath();
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.fill();
cxt.restore();
this.time+=1;
}
}</p> <p> function Sun(){//太阳1
DrawStart.call(this,0,0,20,0,"#f00","#f90");
}
function Mercury(){//水星2
DrawStart.call(this,0,-50,10,87.70,"#A69697","#5c3e40");
}
function Venus(){//金星3
DrawStart.call(this,0,-100,10,224.71,"#c4bbac","#1f1315");
}
function Earth(){//地球4
DrawStart.call(this,0,-150,10,365.224,"#78b1e8","#050c12");
}
function Mars(){//火星5
DrawStart.call(this,0,-200,10,686.98,"#cec9b6","#76422d");
}
function Jupiter(){//木星6
DrawStart.call(this,0,-250,10,4332.589,"#c0a48e","#322");
}
function Saturn(){//土星7
DrawStart.call(this,0,-300,10,10759.5,"#f7f9e3","#5c4533");
}
function Uranus(){//天王星8
DrawStart.call(this,0,-350,10,30799.95,"#a7e1e5","#19243a");
}
function Neptune(){//天王星9
DrawStart.call(this,0,-400,10,60152.95,"#0661b2","#1E3b73");
}

var s=new Sun();//1

var m=new Mercury();//2
var v=new Venus();//3
var e=new Earth();//4
var ma=new Mars();//5
var j=new Jupiter();//6
var sa=new Saturn();//7
var ur=new Uranus();//8
var ne=new Neptune();//9

setInterval(function(){
cxt.clearRect(0,0,1000,1000);
DrawTrack();
s.draw();
m.draw();
v.draw();
e.draw();
ma.draw();
j.draw();
sa.draw();
ur.draw();
ne.draw();
},10);

热心网友回答时间：2022-05-12 09:20

今天研究的是利用HTML5的Canvas画图来模拟太阳系运转，首先，在这个太阳系里分为画轨道和画星球两个部分，
对于每一个星球我们要知道它的颜色和公转周期，如下图。

采用面向对象编程的思想，代码如下

stars.html
[html] view plain copy
<!DOCTYPE HTML>

<html>
<head></head>
<body>
<canvas id="canvas" width="1000" height="1000" style="background:#000">
你的浏览器不支持canvas标签！
</canvas>

<script src="stars.js">
</script>

</body>
</html>

stars.js
[javascript] view plain copy
/******************************************/
/* */
/* 本节代码体现了用JavaScript编写面向对 */
/* 象程序的思想，希望能认真阅读理解。 */
/* */
/******************************************/

//设置2d绘图环境
var ctx = document.getElementById("canvas").getContext("2d");

//画轨道
function drawTrack(){
for(var i = 0; i < 8; i++){
ctx.beginPath();
ctx.arc(500, 500, (i + 1) * 50, 0, 360, false);
ctx.closePath();
ctx.strokeStyle = "#fff";
ctx.stroke();
}
}

//画星球的类
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(){
ctx.save(); //保存之前的内容
ctx.translate(500, 500); //重置0，0坐标
ctx.rotate(this.time * (360 / this.cycle) * Math.PI / 180); //旋转角度

//画星球
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, 360, false);
ctx.closePath();
//设置星球的填充颜色
this.color = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.radius);
this.color.addColorStop(0, this.sColor);
this.color.addColorStop(1, this.eColor);
ctx.fillStyle = this.color;
ctx.fill();
//恢复之前画布的内容
ctx.restore();
this.time += 1;
}
}

//创建一个太阳的构造函数
function Sun(){
Star.call(this, 0, 0, 20, 0, "#FFFF00", "#FF9900");
}

//创建一个水星的构造函数
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.2422, "#78B1E8", "#050C12");
}

//创建一个火星的构造函数
function Mars(){
Star.call(this, 0, -200, 10, 686.98, "#CEC9B6", "#76422D");
}

//创建一个木星的构造函数
function Jupiter(){
Star.call(this, 0, -250, 10, 4332.589, "#C0A48E", "#322222");
}
//创建一个土星的构造函数
function Saturn(){
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 saturn = new Saturn();
var uranus = new Uranus();
var neptune = new Neptune();

function Move(){
ctx.clearRect(0, 0, 1000, 1000);
drawTrack();
sun.draw();
mercury.draw();
venus.draw();
earth.draw();
mars.draw();
jupiter.draw();
saturn.draw();
uranus.draw();
neptune.draw();
}

setInterval(Move,10);

本文如未解决您的问题请添加抖音号：51dongshi（抖音搜索懂视），直接咨询即可。

相关推荐

html5使用canvas绘制太阳系效果

html5使用canvas绘制太阳系效果:这篇文章主要介绍了html5使用canvas绘制太阳系效果,需要的朋友可以参考下：<canvas id="canvas" width="1000" height="1000" style="background-color: #000;"&gt
查看详情
canvas实例2-太阳系1

canvas实例2-太阳系1:
查看详情
JS+canvas做出围绕旋转动画

JS+canvas做出围绕旋转动画:这次给大家带来JS+canvas做出围绕旋转动画，JS+canvas做出围绕旋转动画的注意事项有哪些，下面就是实战案例，一起来看一下。使用canvas的convas来实现围绕旋转动画，外圈顺时针，里层逆时针 html文件<!DOCTYPE html> <html&g
查看详情

已解决

等待解决

制作太阳系模型的方法，急如果要画太阳系比例尺可以变吗? 太阳系8大行星在太阳系中的位置怎样画出来用示意图画出地球，太阳系，银河系，宇宙之间的关... 崔槿汐晒娃画的“太阳系”引热议，她的老公有何背景？《seo大师》怎么正确的修改网站title 太阳怎么画想学习下做网站，优化网站，有大师教我下吗？太阳系长什么样子呢？太阳系真正的样子是什么样的？优化大师网站怎么不跳到鲁大师网站了？太阳系思维导图怎么画谁给我个好的优化大师的网站，我要下载怎么画太阳系模型图室内设计大师作品的网站假如把太阳系按比例精确画在一堵墙上会是什么样子？网站推广SEO优化百度关键词大师怎么用? 太阳系各星球的关系,它的图谱怎么画有谁知道大师网站是多少啊？ \画太阳系的一个示意图，至少包括太阳、八大行星、... 寻找一位自己建设网站的大师，用IIS建设网站为什么... 怎么用cad画出太阳系的效果图怎么做太阳系模型？太阳系3D怎么做出来？太阳系大小多少光年来看看太阳系到底有多大，真实比例图太阳系示意图我要画什么什么的太阳，挂在什么，让什么什么。门卫拦杆感应起杆原理？门卫感应栏杆记录电脑里多久自动删除一次怎么解决自动感应门夹人问题我跟家属骑电瓶车从小... 监控摄像机在保安闭路监控系统中属于系统的甚么端... 小区汽车自动抬杆为什么进去可以，出来就不行银行的自动门是有人控制还是怎么实现的? 在美剧中，有一种通过入侵公司保安系统为公司查找... 未按时打上下班卡者，不允补签卡，若应考勤机或感... 为什么会有心理感应? 关于打卡机未来校园的图画微信群里进来陌生人，提示是“通过扫描你的二维码添加”，我没有给陌生人扫描过二维码，怎么回事？百度地图的导航设置中选择在线优先还是离线优先？百度carlif+怎么设计离线地图优先？

首页

互助专区

登录

注册

canvas做太阳系怎样才能让地球绕着太阳转

html5使用canvas绘制太阳系效果

canvas实例2-太阳系1

JS+canvas做出围绕旋转动画