文档章节

canvas绘图工具加上JavaScript特效绘制出能动的太阳系

lotozhou
 lotozhou
发布于 2015/12/04 14:01
字数 387
阅读 102
收藏 3

通过canvas绘图工具,绘制太阳系,用JavaScript函数让星球动起来,达到动画的效果。

首先创建html并写出样式:

<style>
    *{ padding:0px; margin:0px;}
    #canvas{ background:#000;}
</style>

<canvas id="canvas" width="900" height="900">
</canvas>

第一步调用函数绘制出轨道:

var cxt = document.getElementById("canvas").getContext("2d");

function drawTrack(){
    for(var i=0;i<8;i++){
        cxt.beginPath();
        cxt.arc(450,450,(i+1)*45,0,360,false);
        cxt.closePath();
        cxt.strokeStyle = "#fff";
        cxt.stroke();
    }
}
drawTrack();

第二步创建绘制星球的函数:

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.time = 0;
    this.color = null;
    this.draw = function(){
        cxt.save();                     
        cxt.translate(450,450);        
        cxt.rotate(this.time*(360/this.cycle)*Math.PI/180);
        cxt.beginPath();
        cxt.arc(this.x,this.y,this.radius,0,360,false);
        cxt.closePath();
        this.color = cxt.createRadialGradient(this.x,this.y,0,this.x,this.y,this.radius);
        this.color.addColorStop(0,this.sColor);
        this.color.addColorStop(1,this.eColor);
        cxt.fillStyle = this.color;
        cxt.fill();
        cxt.restore(); 
    }
}

第三部调用创建的函数绘制出星球:

function Sun(){
    Star.call(this,0,0,30,0,"#f00","#f90");
}
function Mercurry(){
    Star.call(this,0,-45,6,87.7,"#a69697","#5c3e40");
}
function Venus(){
    Star.call(this,0,-90,14.23,224.7,"#c4bbac","#1f1315");
}
function Earth(){
    Star.call(this,0,-135,15,365.24,"#78b1e8","#050c12");
}
function Mars(){
    Star.call(this,0,-180,10,686.98,"#cec9b6","#76422d");
}
function Jupiter(){
    Star.call(this,0,-225,23,4332.589,"#a0a48e","#322222");
}
function Saturn(){
    Star.call(this,0,-270,21,10759.5,"#f7f9e3","#5c4533");
}
function Uranus(){
    Star.call(this,0,-315,8,30799.095,"#a7e1e5","#19243a");
}
function Neptune(){
    Star.call(this,0,-360,7,60152,"#0661b2","#1e3b37");
}
var sun = new Sun();
var mercurry = new Mercurry();
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();
sun.draw();
mercurry.draw();
venus.draw();
earth.draw();
mars.draw();
jupiter.draw();
saturn.draw();
uranus.draw();
neptune.draw();

到此,整个太阳系的轨道和所有星球都绘制出来了,剩下的就只有让这些星球按照各自的周期动起来

第四补依然是调用函数

function move(){
    cxt.clearRect(0,0,1000,1000);
    drawTrack();
    sun.draw();
    mercurry.draw();
    venus.draw();
    earth.draw();
    mars.draw();
    jupiter.draw();
    saturn.draw();
    uranus.draw();
    neptune.draw();
}
setInterval(move,10);


© 著作权归作者所有

共有 人打赏支持
lotozhou
粉丝 9
博文 51
码字总数 51524
作品 0
苏州
程序员
私信 提问
《WebGL编程指南》学习笔记——2.使用元素

版权声明:欢迎访问http://hushhw.cn (我的个人博客) https://blog.csdn.net/hushhw/article/details/78821908 《WebGL编程指南》学习笔记——2.使用< canvas >元素 上一节初步认识了WebGL...

hushhw
2017/12/16
0
0
Web 开发中的矢量绘图处理和应用

矢量绘图一直是 Web 开发中一直比较薄弱的环节。本文首先针对不同浏览器详细阐述不同的矢量绘图解决方案,其中包括 HTML5 Canvas、SVG 以及 VML 等技术;之后针对每种不同的技术介绍其实现和...

IBMdW
2011/09/03
1K
0
Web开发中的矢量绘图(vml,svg)处理和应用

前言 1991 年物理学家 Tim Berners-Lee 首次在因特网上发布了 HTML 的第一版描述规范文档。经过了 20 多年的发展,HTML 语言成为如今编程最为广泛的语言和互联网上采用最广的文档格式。虽然 ...

kevin_pang
2014/02/25
0
0
AudioContext技术和音乐可视化(2)

Intro 转载请注明来源,可以在测试博客查看完成效果。 本篇讲述如何绘制动态的星空,其实关联到频域数据已经没什么悬念了。 一、使用Canvas绘图 1.1 位置和大小 绘制背景的第一要务便是把can...

御坂网络路由器
11/08
0
0
基于 HTML5 的 Dojo Widget 开发

简介: 当前的 Web 开发存在着两种趋势,一是基于 HTML、CSS 和 JavaScript 技术,比如以 Dojo 工具包、jQuery 等为基础的 HTML 页面;另一种是基于浏览器端运行时,如基于 Flash、Silverlig...

IBMdW
2011/07/31
1K
2

没有更多内容

加载失败,请刷新页面

加载更多

zookeeper配置与使用

一.登录官网下载 不要带后缀的,那是公侧版本,下稳定版,比如3.4.9 二.安装与使用 解压后bin里是启动程序 配置文件:在conf下 复制zoo_sample.cfg改名为为zoo.cfg,打开zoo修改文件...

小兵胖胖
32分钟前
2
0
spring源码阅读笔记(一)

ClassPathXmlApplicationContext 与 FileSystemXmlApplicationContext 用了这么久的框架,是时候搞一下源码了,一般最初接触spring 从以下步骤开始 创建一个bean类 并创建 ooxx.xml之类的spr...

NotFound403
55分钟前
4
0
MySQL主从配置

12月14日任务 17.1 MySQL主从介绍 17.2 准备工作 17.3 配置主 17.4 配置从 17.5 测试主从同步 MySQL主从介绍 MySQL主从又叫做Replication、AB复制。简单将就是A/B两个服务器做主从后,在A上写...

robertt15
58分钟前
12
0
我的Linux系统九阴真经

在今天,互联网的迅猛发展,科技技术也日新月异,各种编程技术也如雨后春笋一样,冒出尖来了。各种创业公司也百花齐放百家争鸣,特别是针对服务行业,新型互联网服务行业,共享经济等概念的公...

问题终结者
今天
22
0
Java 使用 gson 对 json 根据 key 键进行排序

引入Google的gson jar <dependency> <groupId>com.google.code.gson</groupId> <artifactId>gson</artifactId> <version>2.8.0</version>......

yh32
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部