HTML5使用画布绘制太阳系的效果。

本文主要介绍了利用HTML5绘制太阳系的效果图，有需要的朋友可以参考下。









明星
变量名
旋转周期
光的颜色
黑暗的颜色


水星
水星
八十七点70
# a69697
# 5c3e40


金星
金星
224.701.70
# c4bbac
# 1f1315


地球
地球
三百六十五点二四二二
# 78b1e8
# 050c12


火星
火星
六百八十六点九八
# cec9b6
# 76422d


木星
木星
四千三百三十二点五八九
# c0a48e
# 322


土星
土星
一万零七百五十九点九五
# f7f9e3
# 5c4553


天王星
天王星
三万零七百九十九点零九五
# a7e115
# 19243a


海王星
海王星
六万零一百五十二点九五
# 0661b2
# 1e3b73







复制代码代码如下所示：
VaR的画布document.getelementbyid（画布）；
VaR CXT = canvas.getcontext（2D）；

功能drawtrack（）{
对于（var i = 0；i < 8；i + +）{
Cxt.beginPath（）；
Cxt.arc（500500，（i + 1）* 500360，假）；
Cxt.closePath（）；
CXT。strokeStyle =# FFF；
Cxt.stroke（）；
}
}
功能drawstart（x，y，半径、周期、scolor，易彩）{
绘制行星需要什么属性

行星坐标。
这x = x；
这个，y = y；
行星半径
半径=半径；
星色（色/色开始，结束）
这scolor = scolor；
这易彩=易彩；
创建渐变颜色对象
这个颜色= null；
这个时间= 0；
/公共循环
这个循环=循环；
这个函数= =函数（）{
Cxt.save（）；
（500500）cxt.translate；
设置旋转角度
Cxt.rotate（这个时间* 360 /本。周期*数学。π/ 180）；
Cxt.beginPath（）；
Cxt.arc（这个X，Y，this.radius，，0360，false）；
Cxt.closePath（）；
这个颜色= cxt.createradialgradient（这个X，Y，0，这这。。X，Y，这这。。半径）；
This.color.addColorStop（0，，scolor）；
This.color.addColorStop（1，，易彩）；
CXT。fillStyle = this.color；
Cxt.fill（）；
Cxt.restore（）；
这个时间= 1；
}
}
函数Sun（1）{ Sun
DrawStart.call（，0,0,20,0，# F00
}
函数（水银）{水银2
DrawStart.call（，0，87.70 - 50,10,，# a69697
}
函数（维纳斯）{金星3
DrawStart.call（，0，-10010224.71，# c4bbac
}
函数（地球）4
DrawStart.call（，0，-15010365.224，# 78b1e8
}
函数（Mars）{火星5
DrawStart.call（，0，-20010686.98，# cec9b6
}
函数木星（6）{ Jupiter
DrawStart.call（，0，-250104332.589，# c0a48e
}
函数（萨图恩）7
DrawStart.call（，0，3001010759.5，# f7f9e3
}
功能天王星（8）{天王星/天王星
DrawStart.call（，0，-3501030799.95，# a7e1e5
}
作用海王星（9）{天王星/天王星
DrawStart.call（，0，-4001060152.95，# 0661b2
}

var =新的Sun（）；1

var =新的汞（）；2
var =新的维纳斯（）；3
var =新地球（）；4
var =新Mars（）；5
var =新的木星（）；6
var =新的萨图恩（）；7
乌尔=新天王星（）；8
var =新的海王星（）；9

setInterval（）{（）函数（
（0010001000）cxt.clearrect；
DrawTrack（）；
S.draw（）；
M.draw（）；
V. Draw（）；
E.draw（）；
Ma.draw（）；
J.draw（）；
Sa.draw（）；
Ur.draw（）；
Ne.draw（）；
}，10）；