文档章节

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

lotozhou
 lotozhou
发布于 2015/12/04 14:01
字数 387
阅读 99
收藏 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
粉丝 8
博文 51
码字总数 51524
作品 0
苏州
程序员
《WebGL编程指南》学习笔记——2.使用元素

《WebGL编程指南》学习笔记——2.使用< canvas >元素 上一节初步认识了WebGL,这一小节我们来开始学习使用< canvas >元素绘制二维图形 WebGL编程指南学习笔记2使用 canvas 元素 下小节我们正...

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

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

kevin_pang
2014/02/25
0
0
使用 HTML5 canvas 绘制的图形

HTML5 是一个新兴标准,它正在以越来越快的速度替代久经考验的 HTML4。HTML5 是一个 W3C “工作草案” — 意味着它仍然处于开发阶段 — 它包含丰富的元素和属性,它们都支持现行的 HTML 4.0...

coko
2013/08/15
0
0
使用javascript实现跨浏览器绘图相关..

HTML里DOM的canvas对象可以画出各式各样的2D 3D图象,甚至游戏.但IE不支持这个对象,微软不想让javascript太强大. 可以通过SVG/VML+JS模拟canvas来实现跨浏览器的矢量图形实现方案. 这其实和网...

喔喔兒
2011/04/10
0
0
p5.js简易实现 apple watch 三色表盘

apple watch原图欣赏 莫名其妙的好看有不! 于是我就想着用js写写看,能否简单的实现这个效果,于是就真的实现了一个很简单(简陋)的效果。 图片预览一下: p5.js 想要实现上述的简单效果用...

DeCoder
06/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

这些Spring中的设计模式,你都知道吗?

设计模式作为工作学习中的枕边书,却时常处于勤说不用的尴尬境地,也不是我们时常忘记,只是一直没有记忆。 Spring作为业界的经典框架,无论是在架构设计方面,还是在代码编写方面,都堪称行...

Java填坑之路
25分钟前
1
0
Spring Aop原理之Advisor过滤

在上文(Spring Aop之Advisor解析)中我们讲到,Spring Aop对目标bean的代理主要分为三个步骤:获取所有的Advisor,过滤当前bean可应用的Advisor和使用Advisor为当前bean生成代理对象,并且上文...

爱宝贝丶
36分钟前
0
0
JMockit学习教程

1 JMockit中文网 我觉得如果仅仅是开发自测的话,把JMockit中文网认真看一遍,就可以在项目中使用JMockit了。 http://jmockit.cn/index.htm 2 JMockit中文教程 官方文档中文版。对于不喜欢看...

SuperHeroes
48分钟前
0
0
Linux服务器几乎从不采用Arch Linux?

我们见得多的Linux服务器系统一般都是什么Ubuntu Server啊,什么Cent OS啊,什么Fedora啊,或者企业采用的Red Hat啊,为什么几乎没有Arch Linux呢?下面我将从若干个方面指出Arch Linux在服务...

linux-tao
59分钟前
0
0
js 函数柯里化 闭包

参考 https://mp.weixin.qq.com/s/GEHL3jarDdAAcr5tQGjmDg 一个统计求和的函数 需要知道整个数组的信息,然后遍历求值 function countMoney() { let money = 0 // 温馨提示:arguments...

阿豪boy
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部