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

最新推荐文章于 2021-07-29 08:40:00 发布

ACdreamers

最新推荐文章于 2021-07-29 08:40:00 发布

阅读量6.5k

点赞数 4

分类专栏： HTML5

本文链接：https://blog.csdn.net/ACdreamers/article/details/24982397

版权

HTML5 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

今天研究的是利用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);

运行效果：

ACdreamers

关注

4
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
HTML5的Canvas画图模拟太阳系运转

今天研究的是利用HTML5的Cnavas画图来模拟太阳系运转，首先，在这个太阳系里分为画轨道和画星球两个部分，对于每一个星球我们要知道它的颜色和公转周期，如下图。采用面向对象编程的思想，代码如下：你的浏览器不支持canvas标签！ //设置2d绘图环境
复制链接

扫一扫

专栏目录