HTML5 canvas绘制太阳系各行星(包括月球的公转)

HTML5 canvas绘制太阳系

看了好多canvas绘制太阳系行星，他们都忽略了月亮，虽然月亮不是行星，但是绘图少了月亮也就没有挑战性了，今天我就计算了一下月亮的轨迹，然后按照公转的比例画了上去，首先看一下效果：

接下来是项目的说明书和标准：

根据以上的效果和要求，我们写出的代码为：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>sun</title><style type="text/css">#canvas{display: block;background-color:#000;margin:0 auto;}</style></head><body><canvas id="canvas" width="1000" height="1000"></canvas></body><script type="text/javascript">var canvas = document.getElementById("canvas");var cxt = canvas.getContext('2d');var time = 0;var EarchRotate = 0;var MoonX = 0;var MoonY = 0;//行星轨道function starRoute(){for(var i=0; i<=8; i++){cxt.save();cxt.translate(500,500);cxt.strokeStyle = '#fff';cxt.beginPath();cxt.arc(0,0,i*55,0,2*Math.PI,false);cxt.closePath();cxt.stroke();cxt.restore();}}//创建Start类型(其实在js中是对象)function Star(name,x,y,r,startColor,endColor,revolution){this.name = name;          //星球名称this.x = x;                //圆心  x,ythis.y = y;this.r = r;                //半径  rthis.startColor = startColor;        //渐变 start,endthis.endColor = endColor;this.revolution = revolution;//公转周期 revolution}Star.prototype = {constructor : Star,drawStar : function(){cxt.save();cxt.translate(500,500);//绘制渐变颜色var gradient = cxt.createRadialGradient(this.x,this.y,0,this.x,this.y,this.r);gradient.addColorStop(0,this.startColor);gradient.addColorStop(1,this.endColor);cxt.fillStyle = gradient;cxt.beginPath();if(this.name == '地球'){//存储转动的角度,找到moon的旋转坐标EarchRotate = time*360/this.revolution*Math.PI/180;MoonX = 165*Math.sin(EarchRotate);MoonY = -165*Math.cos(EarchRotate);cxt.rotate(time*360/this.revolution*Math.PI/180);cxt.arc(this.x,this.y,this.r,0,2*Math.PI,false);cxt.fill();}else if(this.name == '月球'){cxt.save();cxt.translate(MoonX,MoonY); //重置原点，即设置月球旋转中心//月球旋转轨迹cxt.beginPath();cxt.strokeStyle = 'rgba(207,207,207,0.2)';cxt.arc(0,0,30,0,2*Math.PI,false);cxt.stroke();cxt.closePath();//月球圆心坐标var x = 30*Math.cos((time*360/this.revolution-90)*Math.PI/180);var y = 30*Math.sin((time*360/this.revolution-90)*Math.PI/180);cxt.rotate(time*360/this.revolution*Math.PI/180);//月球的渐变颜色var gradientM = cxt.createRadialGradient(x,y,0,x,y,this.r);gradientM.addColorStop(0,this.startColor);gradientM.addColorStop(1,this.endColor);cxt.fillStyle = gradientM;//绘制月球cxt.beginPath();cxt.arc(x,y,this.r,0,2*Math.PI,false);cxt.closePath();cxt.fill();cxt.restore();}else{cxt.rotate(time*360/this.revolution*Math.PI/180);cxt.arc(this.x,this.y,this.r,0,2*Math.PI,false);cxt.fill();}cxt.closePath();cxt.restore();//加上字体cxt.save();cxt.translate(500,500);cxt.fillStyle = '#fff';cxt.font = "bold " + 0.9*this.r + "px Arial";cxt.textAlign = "center";cxt.textBaseline = "middle";// cxt.rotate(time*360/this.revolution*Math.PI/180)if(this.name=='太阳'){cxt.fillText(this.name,this.x,this.y);}else if(this.name=='月球'){cxt.fillText('',this.x,this.y); //月球太小，字体不显示}else{cxt.fillText(this.name,this.x+50,this.y);}cxt.restore();}}function moveStar(){cxt.clearRect(0,0,1000,1000);   //首先清除画布starRoute();var Sun = new Star('太阳',0,0,25,'#ffff00','#ff9900',0);var Mercury = new Star('水星',0,-55,8,'#a69697','#5c3e40',87.70);   //水星var Venus = new Star('金星',0,-110,13,'#c4bbac','#1f1315',224.701);  //金星var Earth = new Star('地球',0,-165,18,'#78b1e8','#050c12',365.2422); //地球var Moon = new Star('月球',0,-195,6,'#a69697','#5c3e40',27.32); //月球var Mars = new Star('火星',0,-220,10,'#cec9b6','#76422d',686.98); //火星var Jupier = new Star('木星',0,-275,25,'#c0a48e','#322222',4332.589); //木星var Saturn = new Star('土星',0,-330,23,'#f7f9e3','#5c4533',10759.5); //土星var Uranus = new Star('天王星',0,-385,20,'#a7e1e5','#19243a',30799.095); //天王星var Neptune = new Star('海王星',0,-440,20,'#0661b2','#1e3b73',60152); //海王星Sun.drawStar();Mercury.drawStar();Venus.drawStar();Earth.drawStar();Moon.drawStar();Mars.drawStar();Jupier.drawStar();Saturn.drawStar();Uranus.drawStar();Neptune.drawStar();time++;}setInterval(moveStar,100)</script>
</html>

HTML5 canvas绘制太阳系各行星(包括月球的公转)相关推荐

用html制作阴影效果,使用HTML5 Canvas绘制阴影效果的方法
这篇文章主要介绍了使用HTML5 Canvas绘制阴影效果的方法,包括一个3D拉影边缘模糊效果文字的编写例子,在阴影效果的利用上进一步深入,需要的朋友可以参考下创建阴影效果需要操作以下4个属性: ...
html5 Canvas 绘制基本图形从直线图形到使用路径 - 直线、矩形、路径、多边形、复杂组合图形
html5: Canvas 绘制基本图形从绘制直线到路径 Jack Lee 的 CSDN 博客邮箱 :291148484@163.com CSDN 主页:https://blog.csdn.n ...
html中canvas设置透明度,HTML5 Canvas绘制时指定颜色与透明度的方法
这篇文章主要介绍了HTML5 Canvas绘制时指定颜色与透明度的方法,包括全局透明globalAlpha属性的介绍,需要的朋友可以参考下指定颜色黑色是Canvas绘制的默认色彩,要想换一种颜色的 ...
java canvas 画图片_[Java教程][HTML5] Canvas绘制简单图片
[Java教程][HTML5] Canvas绘制简单图片 0 2016-05-13 13:00:04 获取Image对象,new出来定义Image对象的src属性,参数:图片路径定义Image对象 ...
html5 canvas绘制圆形进度实例
2019独角兽企业重金招聘Python工程师标准>>> html5 canvas绘制圆形进度实例 <canvas id="test" width=200 h ...
html 画动画效果,html5 canvas绘制曲线动画特效
特效描述:html5 canvas绘制曲线动画特效. 代码结构 1. HTML代码 Balls Size Speed Delay Go! Presets: Atomic Flower Spiro Y ...
html5时间画布走动,javascript+HTML5 canvas绘制时钟功能示例
本文实例讲述了javascript+HTML5 canvas绘制时钟功能.分享给大家供大家参考,具体如下: 效果如下: 代码: www.jb51.net canvas绘制时钟 div{text-ali ...
用html5做一条线,使用HTML5 canvas绘制线条的方法
使用HTML5 canvas绘制线条的方法发布时间:2020-08-29 11:24:23 来源:亿速云阅读:96 作者:小新这篇文章主要介绍了使用HTML5 canvas绘制线条的方法,具有一 ...
使用 HTML5 Canvas 绘制出惊艳的水滴效果
HTML5 在不久前正式成为推荐标准,标志着全新的 Web 时代已经来临.在众多 HTML5 特性中,Canvas 元素用于在网页上绘制图形,该元素标签强大之处在于可以直接在 HTML 上进行图形操作 ...

HTML5 canvas绘制太阳系各行星(包括月球的公转)

HTML5 canvas绘制太阳系

HTML5 canvas绘制太阳系各行星(包括月球的公转)相关推荐

最新文章

热门文章