HTML5 CSS3 實現地球繞太陽公轉

2022-01-15 04:04:49 字數 1858 閱讀 5086

使用的是正面視角,主要是用 html5 + css3 來實現,js只是用來畫圖。

test.html:

doctype html

>

<

html

>

<

head

>

<

meta

charset

="utf-8"

/>

<

title

>地球-太陽自轉與公轉

title

>

<

link

type

="text/css"

rel='stylesheet'

href

="test.css"

>

link

>

head

>

<

body

>

<

div

class

="box"

>

<

canvas

id="sun"

width

="150px"

height

="150px"

>

canvas

>

<

canvas

id="earth"

width

="50px"

height

="50px"

>

canvas

>

div>

<

script

src="test.js"

>

script

>

body

>

html

>

注意是行內建換元素,可以設定寬高和內外邊距。

test.css:

*.box#sun#[email protected] sunto}

@keyframes earthto}

其中1 s = 1 天。

.box加上一個較大的 perspective 屬性,想象自己漂在太空中較遠處某個點觀察地球和太陽;不加 perspective 屬性相當於站在無窮遠處觀察。

test.js:

var sun = document.getelementbyid("sun").getcontext('2d'),

earth = document.getelementbyid('earth').getcontext('2d'),

gra1 = sun.createradialgradient(75,75,0,75,75,75),

gra2 = earth.createradialgradient(25,25,0,25,25,25);

gra1.addcolorstop(0,'#ffff00');

gra1.addcolorstop(1,'#ff9900');

sun.arc(75,75,75,0,2 *math.pi);

sun.fillstyle =gra1;

sun.fill();

gra2.addcolorstop(0,'#78b1e8');

gra2.addcolorstop(1,'#1c4364');

earth.arc(25,25,25,0,2 *math.pi);

earth.fillstyle =gra2;

earth.fill();

效果圖: