最近闲下来，开始了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上测试有效。
相关推荐
这篇博客“HTML5 Canvas绘制太阳系”显然将引导我们探索如何利用Canvas API构建一个动态的、交互式的太阳系模型。虽然没有直接提供博客内容，但从标题和标签我们可以推测，博主将介绍如何使用源代码和相关工具来实现...
本次实验旨在通过绘制一个小型太阳系模型，帮助学习者深入了解和掌握`<canvas>`的基本用法及其相关的图形和图像处理方法。 #### 实验目标 1. **理解`<canvas>`元素**：了解如何在HTML文档中插入`<canvas>`元素，并...
在这个实例中，开发者首先创建了一个canvas元素，并设置了合适的宽度和高度，以适应太阳系模型的展示。然后，他们利用JavaScript获取到这个canvas元素的2D渲染上下文，这是进行所有绘图操作的关键。 接着，开发者...
总的来说，这个项目是HTML5 Canvas应用的一个实例，它结合了物理学原理、编程技巧和艺术设计，为用户呈现了一个生动的太阳系模型。通过学习和理解这样的代码，开发者不仅可以提升自己的前端技能，也能增进对天文学...
基于canvas绘制大坝浸润线源码+项目说明.zip 基于canvas绘制大坝浸润线源码+项目说明.zip 基于canvas绘制大坝浸润线源码+项目说明.zip 基于canvas绘制大坝浸润线源码+项目说明.zip 基于canvas绘制大坝浸润线源码+...
这是用canvas画出的太阳系，包括地球的公转和月球的公转，周期都是计算好的
基于canvas的粒子文字动画特效.rar 基于canvas的粒子文字动画特效.rar 基于canvas的粒子文字动画特效.rar 基于canvas的粒子文字动画特效.rar 基于canvas的粒子文字动画特效.rar 基于canvas的粒子文字动画特效.rar ...
微信小程序基于canvas实现纯色背景抠图功能，值得一看和学习；微信小程序基于canvas实现纯色背景抠图功能，值得一看和学习；微信小程序基于canvas实现纯色背景抠图功能，值得一看和学习；微信小程序基于canvas实现...
基于Canvas实现的HTML5编辑器，更进一步地利用了HTML5的Canvas元素，这是一种用于在网页上绘制图形的JavaScript API。Canvas提供了一种动态、灵活的方式来创建和修改图像，使其成为构建富媒体应用和复杂交互式编辑...
echarts基于canvas中国地图省市地区介绍代码.rar echarts基于canvas中国地图省市地区介绍代码.rar echarts基于canvas中国地图省市地区介绍代码.rar echarts基于canvas中国地图省市地区介绍代码.rar echarts基于...
【基于canvas的粒子组成文字动画特效】是一种利用HTML5的核心技术Canvas实现的视觉效果。Canvas是HTML5中用于绘制2D图形的API，允许开发者在网页上动态渲染图像。在这个特效中，粒子由无数个小点构成，通过...
网页动画素材 WebGL基于canvas画布绘制3D噪音线条酷炫动画特效。（抖音资料）网页动画素材 WebGL基于canvas画布绘制3D噪音线条酷炫动画特效。（抖音资料）网页动画素材 WebGL基于canvas画布绘制3D噪音线条酷炫动画...
15款基于canvas的时钟特效，html5中的canvas制作炫酷时钟
Fabric.js提供了丰富的对象模型，使得创建、编辑和管理Canvas上的图像对象变得更加简单。它包含了一系列预定义的对象类型，如矩形、圆形、文本等，同时也支持自定义对象，这些特性使得基于Fabric.js构建图片编辑器变...
基于canvas飞机大战特效，可以直接运行；基于canvas飞机大战特效，可以直接运行；基于canvas飞机大战特效，可以直接运行；基于canvas飞机大战特效，可以直接运行；基于canvas飞机大战特效，可以直接运行
【标题】：基于canvas的移动端图片编辑插件 在移动互联网时代，图片编辑已经成为许多应用程序不可或缺的功能，尤其在移动端H5页面和微信小程序中。基于canvas的图片编辑插件为开发者提供了一种轻量级、高效且灵活的...
本教程将探讨如何利用canvas 2D API来实现一个高效、可定制的环形进度条自定义组件。Canvas 2D 提供了一套丰富的绘图接口，让我们能够动态绘制复杂的图形，如环形进度条。 首先，我们需要了解canvas的基本使用。在...
在本文中，我们将深入探讨如何使用HTML5的Canvas API编写一个简易的捕捉昆虫小游戏。Canvas是HTML5的一个重要组成部分，它允许开发者在网页上进行动态的2D绘图，为创建交互式图形和游戏提供了强大的工具。对于初学者...
基于Canvas的Javascript简易涂鸦板实现 本资源主要介绍了如何使用HTML5中的Canvas标签和Javascript语言来实现一个简易的涂鸦板。涂鸦板具有绘画、绘制规则图形、选择笔触颜色、选择填充颜色、设置线条粗细、橡皮擦...