最近闲下来，开始了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>
//获取画布DOM
var 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;//计数器，表示循环了多少个时间单位timeUnit
var 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>
//获取画布DOM
var 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上测试有效。
相关推荐
本文将深入探讨一个基于JavaScript的行星模拟器——js-planet，它巧妙地利用了EaselJS库和NodeJS来构建一个简易的2D太阳系模型。 首先，js-planet项目的核心在于其运用了基本的物理学原理，通过编程实现了行星运动...
海神之光上传的视频是由对应的完整代码运行得来的，完整代码皆可运行，亲测可用，适合小白； 1、从视频里可见完整代码的内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
海神之光上传的视频是由对应的完整代码运行得来的，完整代码皆可运行，亲测可用，适合小白； 1、从视频里可见完整代码的内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
海神之光上传的视频是由对应的完整代码运行得来的，完整代码皆可运行，亲测可用，适合小白； 1、从视频里可见完整代码的内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
log凑字数 12345678910
【毕业设计】java+springboot+vue电影评论网站系统设计与实现（完整前后端+mysql+说明文档+LunW）.zip
海神之光上传的视频是由对应的完整代码运行得来的，完整代码皆可运行，亲测可用，适合小白； 1、从视频里可见完整代码的内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
双向全桥LLC谐振变换器与非对称拓扑的双向模型仿真研究：正向LLC与反向LC的变频控制闭环模型在Matlab Simulink及PLECS环境下的应用,双向全桥LLC谐振变换器：非对称拓扑与双向模型的Matlab Simulink及PLECS仿真研究,双向全桥LLC谐振变器仿真，非对称拓扑，双向模型 正向LLC，反向LC 采用变频控制的闭环模型 运行环境包括matlab simulink，plecs等 ~ ,双向全桥LLC谐振变换器仿真; 非对称拓扑; 双向模型; 变频控制; Matlab Simulink; PLECS。,双向全桥LLC谐振变换器仿真研究：非对称拓扑与变频控制模型
Jordan标准型行列互逆方法-程序求解
目前，在复杂任务（如Spider数据集上的文本到SQL转换）中，使用大型语言模型（LLMs）的微调模型和提示方法之间存在显著差距。为了提高LLMs在推理过程中的性能，我们研究了将任务分解为较小子任务的有效性。特别是，我们展示了将生成问题分解为子问题，并将这些子问题的解决方案输入给LLMs，可以显著提高其性能。我们的实验表明，这种方法使三个LLMs的简单少样本性能提高了大约10%，使其准确性接近或超过最先进水平（SOTA）。在Spider数据集的保留测试集中，以执行准确率为衡量标准，最先进水平是79.9，而使用我们方法的新最先进水平为85.3。我们的方法在上下文中学习，比许多经过深度微调的模型高出至少5%。此外，在BIRD基准测试中，我们的方法实现了55.9%的执行准确率，创下了该基准测试保留测试集的新最先进水平
程序可以参考，非常好的思路建设，完美！
海神之光上传的视频是由对应的完整代码运行得来的，完整代码皆可运行，亲测可用，适合小白； 1、从视频里可见完整代码的内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
# 基于FreeRTOS的ARM926EJS实验系统 ## 项目简介 本项目将FreeRTOS移植到基于ARM926EJ S CPU的ARM Versatile Platform Baseboard上，当前版本基于FreeRTOS 10.4.0，后续会随FreeRTOS新版本发布而更新。项目处于早期开发阶段，包含基础的演示任务，可用于学习和研究实时操作系统的基本功能与应用。 ## 项目的主要特性和功能 1. FreeRTOS内核移植实现FreeRTOS内核在ARM926EJ S架构上的移植，支持任务管理、信号量、队列、事件标志、互斥量等功能。 2. 中断处理具备中断服务例行程序，能处理中断事件并切换任务。 3. 任务切换有任务切换机制，支持手动切换和定时器中断切换。 4. 定时器管理可进行定时器的创建、启动、停止、查询等操作。 5. 内存管理实现动态内存分配与释放，支持运行时动态操作。
海神之光上传的视频是由对应的完整代码运行得来的，完整代码皆可运行，亲测可用，适合小白； 1、从视频里可见完整代码的内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
海神之光上传的视频是由对应的完整代码运行得来的，完整代码皆可运行，亲测可用，适合小白； 1、从视频里可见完整代码的内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
基于MATLAB Simulink R2015b的三电平中性点钳位（NPC）逆变器高级仿真模型,基于MATLAB Simulink R2015b的三电平中性点钳位（NPC）逆变器高级仿真模型,Three_Level_NPC_Inverter：基于MATLAB Simulink的三电平中性点钳位（NPC）逆变器仿真模型。 仿真条件：MATLAB Simulink R2015b，拿后前如需转成低版本格式请提前告知，谢谢。 ,核心关键词：Three_Level_NPC_Inverter; MATLAB Simulink; 仿真模型; R2015b版本。,基于MATLAB Simulink的三电平NPC逆变器仿真模型（R2015b版）
CSDN Matlab武动乾坤上传的资料均是完整代码运行出的仿真结果图，可见完整代码亲测可用，适合小白； 1、完整的代码内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博客文章底部QQ名片； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
海神之光上传的视频是由对应的完整代码运行得来的，完整代码皆可运行，亲测可用，适合小白； 1、从视频里可见完整代码的内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
graph_searcher 机器人路径搜索
海神之光上传的视频是由对应的完整代码运行得来的，完整代码皆可运行，亲测可用，适合小白； 1、从视频里可见完整代码的内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作