HTML5的Canvas画图模拟太阳系运转

今天研究的是利用HTML5的Canvas画图来模拟太阳系运转，首先，在这个太阳系里分为画轨道和画星球两个部分，

对于每一个星球我们要知道它的颜色和公转周期，如下图。

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

stars.html

<!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编写面向对 */
/*   象程序的思想，希望能认真阅读理解。   */
/*                                        */
/******************************************///设置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);

运行效果：

HTML5的Canvas画图模拟太阳系运转相关推荐

JS+HTML5的Canvas画图模拟太阳系运转
查看效果:http://hovertree.com/texiao/html5/9.htm 地球自传 http://hovertree.com/texiao/html5/8.htm 代码如下: < ...
python绘制动态模拟图-如何利用Python动态模拟太阳系运转
前言提到太阳系,大家可能会想到哥白尼和他的日心说,或是捍卫.发展日心说的斗士布鲁诺,他们像一缕光一样照亮了那个时代的夜空,对历史感兴趣的小伙伴可以深入了解一下,这里就不多说了. 太阳以巨大的引力使周 ...
如何利用Python动态模拟太阳系运转
更多编程教程请到:菜鸟教程 https://www.piaodoo.com/ 友情链接:好看站 http://www.nrso.net/ 高州阳光论坛https://www.hnthzk.com/ 前 ...
python绘制太阳系_如何利用Python动态模拟太阳系运转
前言提到太阳系,大家可能会想到哥白尼和他的日心说,或是捍卫.发展日心说的斗士布鲁诺,他们像一缕光一样照亮了那个时代的夜空,对历史感兴趣的小伙伴可以深入了解一下,这里就不多说了. 太阳以巨大的引力使周 ...
python怎么画地球绕太阳转_如何利用Python动态模拟太阳系运转
前言提到太阳系,大家可能会想到哥白尼和他的日心说,或是捍卫.发展日心说的斗士布鲁诺,他们像一缕光一样照亮了那个时代的夜空,对历史感兴趣的小伙伴可以深入了解一下,这里就不多说了. 太阳以巨大的引力使周 ...
用python画太阳系_用 Python 动态模拟太阳系运转
提到太阳系,大家可能会想到哥白尼和他的日心说,或是捍卫.发展日心说的斗士布鲁诺,他们像一缕光一样照亮了那个时代的夜空,对历史感兴趣的小伙伴可以深入了解一下,这里就不多说了. 太阳以巨大的引力使周边行星 ...
python模拟太阳系_用 Python 动态模拟太阳系运转
提到太阳系,大家可能会想到哥白尼和他的日心说,或是捍卫.发展日心说的斗士布鲁诺,他们像一缕光一样照亮了那个时代的夜空,对历史感兴趣的小伙伴可以深入了解一下,这里就不多说了. 太阳以巨大的引力使周边行星 ...
用 Python 动态模拟太阳系运转
文 | 野客来源:Python 技术「ID: pythonall」提到太阳系,大家可能会想到哥白尼和他的日心说,或是捍卫.发展日心说的斗士布鲁诺,他们像一缕光一样照亮了那个时代的夜空,对历史感兴趣 ...
用 Python 简单做个动态模拟太阳系运转吧
提到太阳系,大家可能会想到哥白尼和他的日心说,或是捍卫.发展日心说的斗士布鲁诺,他们像一缕光一样照亮了那个时代的夜空,对历史感兴趣的小伙伴可以深入了解一下,这里就不多说了. 太阳以巨大的引力使周边行星 ...

HTML5的Canvas画图模拟太阳系运转

HTML5的Canvas画图模拟太阳系运转相关推荐

最新文章

热门文章