精华内容
下载资源
问答
  • 代码写星空
    千次阅读
    2021-06-14 01:02:05

    var canvas = document.getElementById('canvas'),

    ctx = canvas.getContext('2d'),

    w = canvas.width = window.innerWidth,

    h = canvas.height = window.innerHeight,

    hue = 217,

    stars = [],

    count = 0,

    maxStars = 1200;

    var canvas2 = document.createElement('canvas'),

    ctx2 = canvas2.getContext('2d');

    canvas2.width = 100;

    canvas2.height = 100;

    var half = canvas2.width / 2,

    gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);

    gradient2.addColorStop(0.025, '#fff');

    gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)');

    gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)');

    gradient2.addColorStop(1, 'transparent');

    ctx2.fillStyle = gradient2;

    ctx2.beginPath();

    ctx2.arc(half, half, half, 0, Math.PI * 2);

    ctx2.fill();

    // End cache

    $(window).resize(function() {

    w = canvas.width = window.innerWidth;

    h = canvas.height = window.innerHeight;

    canvas.width(w).height(h);

    });

    function random(min, max) {

    if (arguments.length < 2) {

    max = min;

    min = 0;

    }

    if (min > max) {

    var hold = max;

    max = min;

    min = hold;

    }

    return Math.floor(Math.random() * (max - min + 1)) + min;

    }

    function maxOrbit(x, y) {

    var max = Math.max(x, y),

    diameter = Math.round(Math.sqrt(max * max + max * max));

    return diameter / 2;

    }

    var Star = function() {

    this.orbitRadius = random(maxOrbit(w, h));

    this.radius = random(60, this.orbitRadius) / 12;

    this.orbitX = w / 2;

    this.orbitY = h / 2;

    this.timePassed = random(0, maxStars);

    this.speed = random(this.orbitRadius) / 900000;

    this.alpha = random(2, 10) / 10;

    count++;

    stars[count] = this;

    }

    Star.prototype.draw = function() {

    var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX,

    y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY,

    twinkle = random(10);

    if (twinkle === 1 && this.alpha > 0) {

    this.alpha -= 0.05;

    } else if (twinkle === 2 && this.alpha < 1) {

    this.alpha += 0.05;

    }

    ctx.globalAlpha = this.alpha;

    ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);

    this.timePassed += this.speed;

    }

    for (var i = 0; i < maxStars; i++) {

    new Star();

    }

    function animation() {

    ctx.globalCompositeOperation = 'source-over';

    ctx.globalAlpha = 0.8;

    ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 1)';

    ctx.fillRect(0, 0, w, h)

    ctx.globalCompositeOperation = 'lighter';

    for (var i = 1, l = stars.length; i < l; i++) {

    stars[i].draw();

    };

    window.requestAnimationFrame(animation);

    }

    animation();

    更多相关内容
  • 小型星空代码(CSS+HTML+JS)
  • 这是“罗盘时钟”星空版的全部源代码,具体效果我在博客中已经展示了,还不错,可以根据背景,自己随便再去修改哈!需要的朋友可以下载!!!
  • 实用代码 22 天马星空的DeepDream实用代码 22 天马星空的DeepDream实用代码 22 天马星空的DeepDream实用代码 22 天马星空的DeepDream实用代码 22 天马星空的DeepDream实用代码 22 天马星空的DeepDream实用代码 22 ...
  • 星空代码-Python

    2022-05-24 15:06:08
    星空Python绘制星星
  • JS+HTML5酷炫星空背景动画特效是一款基于HTML5 Canvas实现的动态全屏星空动画效果。
  • CSS3宇宙星空元素动画特效是一款基于CSS3绘制的2D的宇宙星空,流星雨,月球,地球,金星等网页背景元素动画特效。
  • 星空特效代码

    2018-10-17 17:54:15
    一段通过canvas渲染的星空特效代码,该代码可以做为炫酷的页面背景
  • HTML5全屏星空背景动画特效是一款基于html5 canvas制作的星空背景动画效果。
  • 旋转的星空特效代码

    千次阅读 2021-06-12 03:55:24
    旋转的星空特效代码蓝叶网站设计2016-08-02133990评论html5特效代码旋转的星空,首先要设置背景为暗一点的背景色或者图片,例如设置成黑色的背景颜色,然后把代码复制到html文件里,设置下下方JS里的一些设置,如...

    旋转的星空特效代码

    蓝叶    网站设计    2016-08-02    13399    0评论

    html5特效代码旋转的星空,首先要设置背景为暗一点的背景色或者图片,例如设置成黑色的背景颜色,然后把代码复制到html文件里,设置下下方JS里的一些设置,如星星的数量、星星移动的范围、星星的大小等,保存后用支持html5的浏览器打开就能看到旋转的星空特效。

    温馨提示:如果使用复制按钮代码出现错误,建议使用ctrl+c来复制代码。

    旋转的星空

    body{background: black;padding: 0;margin: 0; overflow:hidden}

    .header{margin: 0 auto;width: 100%;height: 100%;background-color: #000;position: relative;}

    var canvas = document.getElementById('canvas'),

    ctx = canvas.getContext('2d'),

    w = canvas.width = window.innerWidth,

    h = canvas.height = window.innerHeight,

    hue = 217,

    stars = [],

    count = 0,

    maxStars = 3000;//星星数量

    var canvas2 = document.createElement('canvas'),

    ctx2 = canvas2.getContext('2d');

    canvas2.width = 100;

    canvas2.height = 100;

    var half = canvas2.width / 2,

    gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);

    gradient2.addColorStop(0.025, '#CCC');

    gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)');

    gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)');

    gradient2.addColorStop(1, 'transparent');

    ctx2.fillStyle = gradient2;

    ctx2.beginPath();

    ctx2.arc(half, half, half, 0, Math.PI * 2);

    ctx2.fill();

    // End cache

    function random(min, max) {

    if (arguments.length < 2) {

    max = min;

    min = 0;

    }

    if (min > max) {

    var hold = max;

    max = min;

    min = hold;

    }

    return Math.floor(Math.random() * (max - min + 1)) + min;

    }

    function maxOrbit(x, y) {

    var max = Math.max(x, y),

    diameter = Math.round(Math.sqrt(max * max + max * max));

    return diameter / 2;

    //星星移动范围,值越大范围越小,

    }

    var Star = function() {

    this.orbitRadius = random(maxOrbit(w, h));

    this.radius = random(60, this.orbitRadius) / 8;

    //星星大小

    this.orbitX = w / 2;

    this.orbitY = h / 2;

    this.timePassed = random(0, maxStars);

    this.speed = random(this.orbitRadius) / 50000;

    //星星移动速度

    this.alpha = random(2, 10) / 10;

    count++;

    stars[count] = this;

    }

    Star.prototype.draw = function() {

    var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX,

    y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY,

    twinkle = random(10);

    if (twinkle === 1 && this.alpha > 0) {

    this.alpha -= 0.05;

    } else if (twinkle === 2 && this.alpha < 1) {

    this.alpha += 0.05;

    }

    ctx.globalAlpha = this.alpha;

    ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);

    this.timePassed += this.speed;

    }

    for (var i = 0; i < maxStars; i++) {

    new Star();

    }

    function animation() {

    ctx.globalCompositeOperation = 'source-over';

    ctx.globalAlpha = 0.5; //尾巴

    ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 2)';

    ctx.fillRect(0, 0, w, h)

    ctx.globalCompositeOperation = 'lighter';

    for (var i = 1, l = stars.length; i < l; i++) {

    stars[i].draw();

    };

    window.requestAnimationFrame(animation);

    }

    animation();

    评论一下

    赞助蓝叶

    赞助蓝叶X

    版权申明:此文如未标注转载均为本站原创,自由转载请表明出处《蓝叶博客》。

    本文网址:https://lanyes.org/web/xingkong.html

    展开全文
  • HTML5旋涡星空旋转背景特效是一款基于HTML5 Canvas绘制的满屏密布星空旋转动画背景动画特效。
  • scratch编程项目源代码文件案例素材-[夜晚的星空].zip
  • 后缀名为HTML的一些代码,有四个,打开就可以用。 分别是星空,机器人,贪吃蛇,花瓣。
  • matlab匹配滤波代码星空 StarryNite是StarryNite细胞谱系软件包的当前Matlab版本,最初是为秀丽隐杆线虫构建的,但已应用于许多模型。 要从源代码运行StarryNite,请将3个源目录的父目录添加到matlab路径,并以...
  • scratch编程项目源代码文件案例素材-星空探险记.zip
  • C#控制台星空模拟程序
  • canvas星空动画
  • HTML5 canvas星空屏保动画代码,两种屏保动画效果。
  • 这是一款使用纯CSS3制作的炫酷3D星空动画特效。该特效中,以飞船向前快速移动为视角,所有的星星都快速的变大并向后移动,效果非常逼真。
  • js星空效果代码

    2020-10-30 07:00:25
    用js实现的星空效果代码,正壮观
  • 怎么操作html星空特效代码

    千次阅读 2021-06-10 05:54:48
    它的通用性可以把存放在一台电脑中的文本或图形与存放在另一台电脑中的文本或图形方便地联系在一起,形成有机的整体,我们以具体的运用为例了解一下html,学习怎么操作html星空特效代码?1、在页面中引入jquery和...

    html不是一种编程语言,而是一种标记语言 ,是网页制作所必备的。这些代码式的专业语言我们在普通的工作中运用的非常少,它的通用性可以把存放在一台电脑中的文本或图形与存放在另一台电脑中的文本或图形方便地联系在一起,形成有机的整体,我们以具体的运用为例了解一下html,学习怎么操作html星空特效代码?

    1、在页面中引入jquery和jquery.warpdrive.min.js文件。

    e41ef00eaa08cdeb1b3a286fba3bb484.png

    2、HTML结构

    使用空的一个

    元素来作为星空背景的容器。

    61dbaca08c99e44d39fac75caf4ad370.png

    3、初始化插件

    在页面DOM元素加载完毕之后,可以通过纯js的方法来初始化该星空背景插件,或将它作为一个jquery插件来使用。

    作为jquery插件来使用。

    cc35a3fff6c4df60adbb1d675c12449f.png

    4、通过js方法来使用。

    dc3d721f08dc5922f66cabc89a997fde.png

    5、该html5星空背景特效插件的可用配置参数如下:

    dd98c2ac401485a18c419c3658fc9596.png

    47c38065d874c293f9a50bf365aee093.png

    6、以jquery插件的方式来调用配置参数:

    ec7b18ef46e906ae67f00e16c1502981.png

    7、通过纯js的方法来调用配置参数:

    ea7c15c67cd9b46fdb630400507eea99.png

    8、该html5星空背景特效插件有两个可用的方法用于暂停和继续播放星空动画。

    暂停jquery:

    2b09e0115ac0131bdbef5af57176858c.png

    继续js:

    eca4527848eddc1c15b317c1485b68cd.png

    用上边的方法就可以通过操作html代码制作出星空特效了,它是一种简单、通用的标记语言。它允许制作的这些页面可以被网上任何其他人浏览到,无论使用的是什么类型的电脑或浏览器。大家课下可以使用html代码制作出更多的特效图进行练习。

    本篇文章使用以下硬件型号:联想小新Air15;系统版本:win10;软件版本:HTML5 。

    展开全文
  • Python中的唯美星空代码详解!

    千次阅读 2020-11-23 05:16:38
    用Python显示真实的星空还是先上图本文讲怎样画出真实的星空。预备知识如果想显示真实的星空,首先你得有真实恒星的位置坐标和亮度标记。它的基本格式如下:{'long': 0.023278328898474372, 'lat': -0....

    5ef1c726a8b55838.jpg

    用Python显示真实的星空

    还是先上图

    1592903534912054.png本文讲怎样画出真实的星空。

    预备知识如果想显示真实的星空,首先你得有真实恒星的位置坐标和亮度标记。它的基本格式如下:

    {'long': 0.023278328898474372, 'lat': -0.09961466705757636, 'light': 46, 'const': 66},

    {'long': 0.024870941840919196, 'lat': 0.2338062439126301, 'light': 55, 'const': 62},

    {'long': 0.028107061526797, 'lat': 1.1204335039257496, 'light': 56, 'const': 18},

    {'long': 0.03660100303760025, 'lat': 0.5077259659824991, 'light': 21, 'const': 1},

    {'long': 0.04004802831028905, 'lat': 1.0323574005393255, 'light': 23, 'const': 18},

    {'long': 0.03944444109507185, 'lat': 0.3178583859888262, 'light': 55, 'const': 62},

    {'long': 0.040797071265367454, 'lat': -0.488478858963941, 'light': 54, 'const': 74},

    {'long': 0.0410661312228549, 'lat': -0.798444499556106, 'light': 39, 'const': 64},

    {'long': 0.043800486202076855, 'lat': 0.1945266317121166, 'light': 55, 'const': 66},

    {'long': 0.045036755271142, 'lat': 0.804111967609767, 'light': 50, 'const': 1},

    {'long': 0.043785947609407745, 'lat': -1.4350775693910554, 'light': 53, 'const': 58},

    {'long': 0.04915283505929031, 'lat': -0.2699684886295715, 'light': 49, 'const': 21},

    {'long': 0.050498187206605094, 'lat': -0.4851966800391031, 'light': 54, 'const': 74},

    每颗星星包含4个信息:天球经度long、天球纬度lat、亮度light(越小越亮)、所属星座const。

    想象所有的星星都镶嵌在一个天球上,它们的位置是固定不变的,所以叫做恒星。

    星星的坐标用经纬度来表示,就如同地球上的位置用经纬度来表示。当地球旋转时,我们看到的是天球的旋转。

    我们所熟悉的北极星,就在非常靠近天球北极的位置上。

    在天球旋转的过程中,它的位置几乎不动。也就是说北极星的位置几乎在任何时候都保持在天空中固定的位置上。之所以能够用北极星来指示方向,也就是这个原理。

    另外,星空是球形的,想把它显示在屏幕上,又涉及几组基本参数的设置:

    观测地的经纬度

    观测的日期和时间

    观测者的观测角度和屏幕大小

    这几组参数中,关系是这样的:观测地的维度是第一位的,观测地确定后,所能看到的星空就是确定的(天球倾角),只有在赤道上能够看到所有的星星,在其它维度都会有一些星星看不到。

    最极端的情况下是在两极地区,永远只能看到半个天球(即一半数量的星星)。

    观测地的经度、观测日期和观测时间这三者其实是等价的,因为地球的公转和自转对于遥远的星空来说,可以认为没有差别。

    当观测点和观测日期时间都确定后,理论可以认为所能看到的星空大约有全天中半数的星星。但能够显示在屏幕上的星星,则取决于你向哪里观看以及屏幕有多大。

    如果能够理解上面这些基本知识,请继续往下看。

    星空计算

    计算经过这样几个步骤:

    1、为了便于计算,首先将每颗星星的经纬度转换为xyz的三维坐标。在这种转换过程中,我们看到的是正立的天球,北极点向上,南极点在下。

    2、将观测地的纬度引入每颗计算

    3、将观测地经度、观测日期、观测时间三者结合起来,形成一个经度数据,引入每颗计算

    4、将观测者的朝向引入每颗计算

    5、将观测者的仰角引入每颗计算

    6、向屏幕投影

    代码如下:def calcStar(stars,Long,Lat,winLong,winLat,eyeDistant):

    Long= radians(Long)

    Lat= radians(Lat)

    winLong= radians(winLong)

    winLat= radians(winLat)

    for star in stars:

    # print(star)

    # 经纬度转换为xyz的三维坐标

    x0= cos(star['long'])* cos(star['lat'])

    y0= sin(star['long'])* cos(star['lat'])

    z0= sin(star['lat'])

    # 观测地经度及日期时间的合并

    x1= x0*cos(Long)- y0*sin(Long)

    y1= x0*sin(Long)+ y0*cos(Long)

    z1= z0

    # 观测地纬度

    x2= x1* sin(Lat)- z1* cos(Lat)

    y2= y1;

    z2= x1* cos(Lat)+ z1* sin(Lat)

    # 观测者转身

    x3= x2* cos(winLong)+ y2* sin(winLong)

    y3= -x2* sin(winLong)+ y2* cos(winLong)

    z3= z2

    # 观测者俯仰

    x4= x3* sin(winLat)- z3* cos(winLat)

    y4= y3

    z4= x3* cos(winLat)+ z3* sin(winLat)

    # 屏幕投影

    star['visible']= (z2> 0 and z4>0)

    star['x']= x4* eyeDistant/z4

    star['y']= y4* eyeDistant/z4

    star['z']= z4

    星星可见的条件是:在地平线之上(z2>0)并且在观测者面前(z4>0),而可见的星星是否真正显示在屏幕上的则取决于它是否在屏幕显示范围内。

    显示代码如下:img= Image.new('RGBA', (1280,720), (0,0,120,255)) # 深蓝色天空

    draw = ImageDraw.Draw(img)

    color= (255,255,0,255) # 黄色星星

    for star in stars:

    # 屏幕中心

    x= round(-star['y']+ 640)

    y= round(star['x']+ 360)

    # 亮度值越小越亮,这里用大小来表示

    r= round(6-star['light']/10)

    if visible(star):

    # print(x,y)

    draw.ellipse((x-r, y-r, x+r, y+r), fill=color)

    img.show()

    怎样将经度、观测日期和观测时间结合起来

    这个问题比想象的复杂太多。如果想做到真正的精确,会涉及平太阳日、真太阳日、恒星日、岁差、经度与本地时间的差异,等等很多细节。

    不过,好在这些误差并不太大,如果你的目标不是科研,并且只考虑近代而不是远古和未来,有些误差即使忽略也没有太大的影响。

    这里我用一个虽然简略,但足够精确的一个经验公式来计算。输入观测地经度、观测日期和时间,返回一个所谓的绝对经度,以这个经度作为我们计算星空位置所使用的经度值。

    代码如下:def getAbsLong(aLong, ayy, amm, add, ahh, amin):

    # 年的影响忽略

    # 月日的影响,首先计算太阳赤经

    # 春分点3月21日为经度0,一年平均365.25天,旋转360度,用插值方法简单计算

    a= julianDay(ayy, amm, add)

    b= julianDay(ayy, 3, 21)

    v= 0- (a-b)/365.25*360

    # 因为使用本地时间,基本可以忽略经度+时区的影响(互相抵消)

    # 时分的影响,中午12点,正对太阳赤经,一天24小时,旋转360度,用插值简单计算

    c= ahh*60+amin

    d= 12*60

    v= v- (c-d)/(24*60)*360

    return v

    星座连线是怎么来的

    星座连线用于辅助我们理解星座形状。结构很简单,就是指明一条线关联哪两个点。这里不展开了,详见代码。{'star1': 61, 'star2': 4, 'const': 1},

    {'star1': 60, 'star2': 61, 'const': 1},

    {'star1': 83, 'star2': 60, 'const': 1},

    {'star1': 83, 'star2': 109, 'const': 1},

    {'star1': 61, 'star2': 58, 'const': 1},

    {'star1': 58, 'star2': 22, 'const': 1},

    {'star1': 22, 'star2': 3097, 'const': 1},

    {'star1': 3097, 'star2': 3097, 'const': 1},

    {'star1': 3097, 'star2': 3088, 'const': 1},

    {'star1': 3007, 'star2': 3090, 'const': 1},

    {'star1': 142, 'star2': 61, 'const': 1},

    更多Python知识,请关注Python视频教程!!

    展开全文
  • 星空特效代码js

    2018-10-16 11:07:33
    一段用js星空特效代码,通过调整,可以做为页面背景使用
  • 绘制星空图的代码SKYmap
  • html5星空太空粒子动画库插件是一款轻量级炫酷js粒子动画库插件。
  • CSS3黑夜星空月亮动画
  • 这是显示星空的简单GUI。 它使用 pvector 根据星的 x 位置生成速度
  • 动态星空科技感粒子登录页 附代码复制即可用;详细解说链接https://blog.csdn.net/qq_42197013/article/details/109110872
  • Canvas跟随鼠标星空流动特效是一款鼠标移动星星跟随星空动画特效,适用于网页动态背景特效。
  • python之星空代码

    千次阅读 2021-11-21 11:40:32
    代码如下:from turtle import * from random import random,randint screen = Screen() width ,height = 800,600 screen.setup(width,height) screen.title(“模拟3D星空”) screen.bgcolor(“black”) screen.mode...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 16,492
精华内容 6,596
热门标签
关键字:

代码写星空

友情链接: sg_entropy_coders.zip