首页 > 其他分享 >HTML5的Canvas画图模拟太阳系运转

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

时间:2023-05-31 15:01:34浏览次数:72  
标签:function Canvas Star ctx 画图 draw HTML5 var 构造函数


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

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

 

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

 

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

 

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画图模拟太阳系运转_构造函数_02

 

 

 

标签:function,Canvas,Star,ctx,画图,draw,HTML5,var,构造函数
From: https://blog.51cto.com/u_16146153/6386950

相关文章

  • LYT-WPF-基础-布局-Canvas面板
    已亲测!ZIndex实例有修改之处!!!本文转自:WPF教程五:布局之Canvas面板-.NET开发菜鸟-博客园(cnblogs.com),感谢~~Canvas:画布面板画布,用于完全控制每个元素的精确位置。他是布局控件中最为简单的一种,直接将元素放到指定位置,主要来布置图面。使用Canvas,必须指定一个子元素的位置(相对......
  • 3D轻量化引擎工具助力Canvas GFX开发插图新产品,可视化视图更精准!
    增材制造和3D打印不乏创新技术,无论是硬件变得更加高效和准确,还是材料科学的巨大进步,都拓宽了3D打印部件的使用范围。然而,Techsoft3D作为软件组件供应商,关注点更多的是在将这两个元素结合在一起的效果,即驱动现代打印机发展并支持使用先进材料的软件平台。凭借超过26年开发工程专......
  • 微信小程序使用ec-canvas在真机上预览图表模糊的解决办法
    在初始化echarts的方法中添加devicePixelRatio:dpr,代码如下:const[ec,setEc]=useState<any>({//初始化图表onInit:(canvas,width,height,dpr)=>{chart=echarts.init(canvas,null,{width,height,devicePixelRatio:dpr,})......
  • 千乎万唤始出来,支持gpt3和gpt4支持画图,的在线gpt应用接入案例开源上线啦
    了解OPENAI平台用户一直在说,这个接口要怎么对接,如何在体验。由于我一直忙于接口中台开发,所以在线基于OPENAI接口实例例子就一直没有写。现在终于写完了。基于纯HTML+CSS+JS小白也能轻松上手部署。代码简单清晰。这里不多做其他赘述,更多关于平台信息如下小白畅玩免费支持Ch......
  • 千乎万唤始出来,支持gpt3和gpt4支持画图,的在线gpt应用接入案例开源上线啦
    了解OPENAI平台用户一直在说,这个接口要怎么对接,如何在体验。由于我一直忙于接口中台开发,所以在线基于OPENAI接口实例例子就一直没有写。现在终于写完了。基于纯HTML+CSS+JS小白也能轻松上手部署。代码简单清晰。这里不多做其他赘述,更多关于平台信息如下小白畅玩免费支持C......
  • Python 使用Seaborn画图,代码正常不出图
    不得不说,这个库画出来的图也太好看了。目前还没有很懂这个库,但是需要注意的是我在用完plt之后引入这个,图片一直出不来真的困扰我很久啊。终于找到了救命的办法参考链接:https://blog.csdn.net/qq_56039091/article/details/124024286......
  • Html5定位不准确问题
    if(navigator.geolocation){navigator.geolocation.getCurrentPosition(getPosition,getPositionError,{//指示浏览器获取高精度的位置,默认为falseenableHighAccuracy:true,//指定获取地理位置的超时时间,默认不限时,单位为毫秒......
  • HTML5
    1.HTML5的新特性HTML5的新增特性主要是针对以前的不足,添加了一些新标签、新的表单和新的表单属性等。1.1HTML5新增的语义化标签<header>:头部标签。<nav>:导航标签。<article>:内容标签。<section>:定义文档某个区域。<aside>:侧边栏标签。<footer>:......
  • 【整理】html5知识点5
    ============================================HTML5WebSocket什么是websocketWebSocket协议是html5引入的一种新的协议,其目的在于实现了浏览器与服务器全双工通信。看了上面链接的同学肯定对过去怎么低效率高消耗(轮询或comet)的做此事已经有所了解了,而在websocketAPI......
  • 【整理】html5知识点4
    1、==================================================================HTML5语义元素HTML5中新的语义元素许多现有网站都包含以下HTML代码:<divid="nav">,<divclass="header">,或者<divid="footer">,来指明导航链接,头部,以......