基于canvas的简易太阳系模型

最近闲下来，开始了HTML5的入门之旅。跟着某视频(避免广告嫌疑)做了两个简单的canvas例子。此处为简易太阳系模型实例。

PS: 例子为实验性例子，欢迎批判~~~~

一、实现逻辑

1、画出轨道，一共8个轨道(冥王星不算)

2、画出星体，含太阳共9个星体

3、循环调用1、2步，使星体动起来。

二、代码展示

1、效果图

2、全部代码如下

a. 简单模式

<!DOCTYPE HTML>
<html><head><meta charset="gb2312"><title> Canvas-太阳系 </title></head><body><canvas width="800" height="800" id="sunClass" style="background:black">您的浏览器不支持<code>canvas</code>标签！</canvas><script>//获取画布DOMvar dCanvas = document.getElementById('sunClass');//设置绘图环境.注意只能用小写“2d”var paper = dCanvas.getContext('2d');var BX=400,BY=400;var panletDef = 40;var colorArr = [["#f00","#f90"],["#A69697","#5C3E40"],["#C4BBAC","#1F1315"],["#78B1E8","#050C12"],["#CEC9B6","#76422D"],["#C0A48E","#322222"],["#F7F9E3","#5C4533"],["#A7E1E5","#19243A"],["#0661B2","#1E3B73"]];var timeUnit = 20;//时间基本数，毫秒  用于表示天var timer = 0;//计数器，表示循环了多少个时间单位timeUnitvar scrollArr = [0,87.7,224.701,365.2422,686.98,4332.589,10759.5,30799.095,164.8*365];//太阳系各行星的公转系数。 单位为天//画图drawSunClass();//启动定时器window.setInterval(drawSunClass,timeUnit);/***   绘制太阳系***/function drawSunClass(){paper.clearRect(0,0,900,900);for(var i = 0; i<9; i++){//1. 画轨道drawTrack(paper,i);//2. 画星体drawCircleBall(paper,i,timer);}timer++;//计数器＋1};/***   画轨道*@param _paper  HTMLCanvas2DContext 对象。通过canvas.getContext('2d')获取*@param order 次序，表示太阳系的行星序号。从太阳本身开始，越远序号越大。***/function drawTrack(_paper,order){if(typeof order == 'undefined') order = 0;if(order > 0){_paper.beginPath();_paper.strokeStyle="#fff";_paper.arc(BX,BY,panletDef*(order),0,360,false);_paper.stroke();_paper.closePath();}}/***    画星体*@param _paper  HTMLCanvas2DContext 对象。通过canvas.getContext('2d')获取*@param order 次序，表示太阳系的行星序号。从太阳本身开始，越远序号越大。*@param time 计数器，表示当前已过多少时间单位。***/function drawCircleBall(_paper,order,time){if(typeof order == 'undefined') order = 0;if(typeof time == 'undefined') time = 0;var cirY = panletDef*order;_paper.save();_paper.translate(BX,BY);//重新设置(0,0)点的位置if(order != 0){_paper.rotate(time*2*Math.PI/scrollArr[order]);}_paper.beginPath();_paper.arc(0,cirY,10,0,360,false);//获取径向渐变对象var fillColor = _paper.createRadialGradient(0,cirY,0,0,cirY,10);fillColor.addColorStop(0,colorArr[order][0]);//指定渐变颜色fillColor.addColorStop(1,colorArr[order][1]);//指定渐变颜色_paper.fillStyle=fillColor;_paper.fill();_paper.closePath();_paper.restore();}</script></body>
</html>

b. 对象模式

<!DOCTYPE HTML>
<html><head><meta charset="gb2312"><title> Canvas-太阳系--js对象模式 </title></head><body><canvas width="800" height="800" id="sunClass" style="background:black">您的浏览器不支持<code>canvas</code>标签！</canvas><script>//获取画布DOMvar dCanvas = document.getElementById('sunClass');//设置绘图环境.注意只能用小写“2d”var paper = dCanvas.getContext('2d');var BX=400,BY=400;//定义中心圆点位置var panletDef = 40;//定义行星之间的距离var timeUnit = 20;//时间基本数，毫秒  用于表示天/***  画轨道*@param _paper  HTMLCanvas2DContext 对象。通过canvas.getContext('2d')获取*@param order 次序，表示太阳系的行星序号。从太阳本身开始，越远序号越大。***/function drawTrack(_paper,order){if(typeof order == 'undefined') order = 0;if(order > 0){_paper.beginPath();_paper.strokeStyle="#fff";_paper.arc(BX,BY,panletDef*(order),0,360,false);_paper.stroke();_paper.closePath();}}/***    创建星体类***/function Star(x,y,r,times,color){this.x = x;this.y = y;this.r = r;this.color = color;this.timer = 0;this.times = times;this.draw = function (_paper){_paper.save();_paper.translate(BX,BY);//重新设置(0,0)点的位置_paper.rotate(this.timer*2*Math.PI/times);_paper.beginPath();_paper.arc(this.x,this.y,this.r,0,360,false);//获取径向渐变对象this.fillColor = _paper.createRadialGradient(this.x,this.y,0,this.x,this.y,this.r);this.fillColor.addColorStop(0,this.color[0]);//指定渐变颜色this.fillColor.addColorStop(1,this.color[1]);//指定渐变颜色_paper.fillStyle=this.fillColor;_paper.fill();_paper.closePath();_paper.restore();this.timer++;}}/***    创建太阳构造函数***/var Sun = function (){Star.call(this,0,0,10,0,["#f00","#f90"]);}/***   创建水星构造函数***/var Mercury = function (){Star.call(this,0,-40,10,87.7,["#A69697","#5C3E40"]);}/***    创建金星构造函数***/var Venus = function (){Star.call(this,0,-80,10,224.701,["#C4BBAC","#1F1315"]);}/***   创建地球构造函数***/var Earth = function (){Star.call(this,0,-120,10,365.2422,["#78B1E8","#050C12"]);}/*** 创建火星构造函数***/var Mars = function (){Star.call(this,0,-160,10,686.98,["#CEC9B6","#76422D"]);}/***    创建木星构造函数***/var Jupiter = function (){Star.call(this,0,-200,10,4332.589,["#C0A48E","#322222"]);}/***   创建土星构造函数***/var Saturn = function (){Star.call(this,0,-240,10,10759.5,["#F7F9E3","#5C4533"]);}/*** 创建天王星构造函数***/var Uranus = function (){Star.call(this,0,-280,10,30799.095,["#A7E1E5","#19243A"]);}/***  创建海王星构造函数***/var Neptune = function (){Star.call(this,0,-320,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 drawSunClass(){//清空画布paper.clearRect(0,0,900,900);for(var i = 0; i<9; i++){//1. 画轨道drawTrack(paper,i);}//2. 画星体sun.draw(paper);mercury.draw(paper);venus.draw(paper);earth.draw(paper);mars.draw(paper);jupiter.draw(paper);saturn.draw(paper);uranus.draw(paper);neptune.draw(paper);};//第一次绘制星图drawSunClass();//启动定时器,循环绘制星图window.setInterval(drawSunClass,timeUnit);</script></body>
</html>

三、后记

1、代码在FireFox 32.0.3上测试有效。

基于canvas的简易太阳系模型相关推荐

CTR预估系列：DeepCTR 一个基于深度学习的CTR模型包
在计算广告和推荐系统中,CTR预估一直是一个核心问题.无论在工业界还是学术界都是一个热点研究问题,近年来也有若干相关的算法竞赛.本文介绍一个基于深度学习的CTR模型包DeepCTR,具有简洁易用.模块 ...
基于OpenCV的简易实时手势识别（含代码）
基于OpenCV的简易实时手势识别 1.基本信息介绍 1.1实验步骤 1.2效果展示 2.肤色检测+二值化+开运算+高斯模糊 2.1 flip()函数原型 2.2cvtColor()函数原型 2.3s ...
去后厂村开游戏厅吧！基于PP-TinyPose的简易体感游戏开发框架
‍ 项目简介近年来,随着虚拟现实技术和计算机图形学技术的迅猛发展,越来越多的体感游戏在市场上出现并受到欢迎.要让体感游戏具备良好的表现,就需要使用大量的传感器,甚至需要使用高性能的计算机和图形处理器 ...
基于canvas制作绚丽的倒计时效果
基于canvas制作绚丽的倒计时效果一.先看下效果项目设计: 数字渲染:数字是存储在一个三维数组里面,通过每次传入一个数字,来取出这个数字对应的点阵模型,这个模型是一个二维数组,有圆点的地方值为1 ...
微支付基础：零确认支付及简易支付模型
稍微了解过比特币的用户应该都知道,比特币设计的是每10分钟产出一个区块.如果把比特币系统当作是一个完整的账本的话,那么一个区块就相当于这个账本的一页,把这个账本的每一页都链接起来形成一个链条,就称之为 ...
基于ROS搭建简易软件框架实现ROV水下目标跟踪（补2）--水下slam仿真构想
这部分内容其实和水下目标跟踪的软件框架没啥联系,但既然上一篇文章提到了水下环境的仿真,结合近期的一点小尝试,也谈谈对水下slam仿真可行性的一些构想. 在水下光学传感器基本上效果非常差.声学设备一方面 ...
Linux下基于TCP的简易文件传输（socket编程）
Linux下基于TCP的简易文件传输(socket编程) OSI和TCP/IP: 关于TCP/IP协议关于TCP协议 TCP编程的一般步骤[^2] TCP文件传输实现功能概述服务器编程客户端编 ...
7个华丽的基于Canvas的HTML5动画
说起HTML5,可能让你印象更深的是其基于Canvas的动画特效,虽然Canvas在HTML5中的应用并不全都是动画制作,但其动画效果确实让人震惊.本文收集了7个最让人难忘的HTML5 Canvas动 ...
新框架ES-MAML：基于进化策略、简易的元学习方法
作者 | Xingyou Song.Wenbo Gao.Yuxiang Yang.Krzysztof Choromanski.Aldo Pacchiano.Yunhao Tang 译者 | TroyC ...

基于canvas的简易太阳系模型

基于canvas的简易太阳系模型相关推荐

最新文章

热门文章