HTML星空特效

目录

写在前面

完整代码

代码分析

运行效果

系列文章

写在后面


写在前面

100行代码实现HTML星空特效。

完整代码

全部代码如下。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>星空特效</title>
</head><body>
</body>
<!-- Html代码 -->
<div><canvas id="canvas"></canvas><canvas id="snow"></canvas><div class="am-g" style="position: fixed; bottom: 0px;"><div class="am-u-sm-12"><div style="z-index: 9999" id="player" class="aplayer"></div></div></div>
</div>
<!-- CSS代码 -->
<style type="text/css">canvas {position: fixed;width: 100%;height: 100%;z-index: -1;}
</style>
<script type="text/javascript">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 = 1300;    //星星数量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();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();canvas2.style.cssText = "display:none";};window.requestAnimationFrame(animation);}animation();
</script></html>

代码分析

这段HTML和JavaScript代码创建了一个网页,该网页展示了一个动态的星空效果,其中星星在画布上随机闪烁并移动。

首先,在HTML结构中,有两个<canvas>元素被定义,分别用于绘制星空背景和可能的其他效果(如雪花),以及一个用于放置音频播放器的<div><canvas>元素通过CSS设置为全屏覆盖,并且位置固定,这样它们可以作为背景层显示。

接下来是CSS样式,它主要设置了<canvas>元素的样式,包括位置、尺寸和层级,确保画布覆盖整个屏幕并且位于其他元素下方。

在JavaScript部分,首先获取了<canvas>元素及其绘图上下文,接着初始化了画布的宽度和高度以匹配浏览器窗口。之后,创建了一个辅助的<canvas>canvas2)来预渲染星星的图像,使用径向渐变填充,模拟出星星从明亮到暗淡的渐变效果。

random函数用于生成随机数,而maxOrbit函数则计算出星星的移动范围,基于画布的尺寸。Star构造函数定义了星星的属性和方法,包括其轨道半径、大小、位置、速度和透明度。星星的运动遵循正弦和余弦函数,从而产生环绕中心点的圆周运动。

animation函数实现了动画循环,它首先设置全局混合模式为source-over,然后设置全局透明度为0.5,以绘制星星留下的“尾巴”效果。接下来,使用hsla颜色填充整个画布,然后切换全局混合模式为lighter,以正确地叠加星星图像。通过遍历所有星星对象并调用draw方法,实现星星的绘制和更新。最后,利用requestAnimationFrame来确保动画的平滑执行,每帧都调用animation函数自身,形成连续的动画效果。

整个星空特效通过精心设计的星星闪烁算法和动态渲染技术,呈现出一个既真实又具有艺术感的星空场景。

运行效果

图片

系列文章

序号目录直达链接
1HTML实现3D相册HTML实现3D相册-CSDN博客
2HTML元素周期表HTML元素周期表-CSDN博客
3HTML黑客帝国字母雨HTML黑客帝国字母雨_字母雨html-CSDN博客
4HTML五彩缤纷的爱心HTML五彩缤纷的爱心-CSDN博客
5HTML飘落的花瓣HTML飘落的花瓣-CSDN博客
6HTML哆啦A梦HTML哆啦A梦_html哆啦a梦代码-CSDN博客
7HTML爱情树HTML爱情树-CSDN博客
8HTML新春烟花盛宴HTML新春烟花盛宴-CSDN博客
9HTML想见你HTML想见你-CSDN博客
10HTML蓝色爱心HTML蓝色爱心-CSDN博客
11HTML跳动的爱心HTML跳动的爱心-CSDN博客
12HTML橙色爱心HTML橙色爱心-CSDN博客
13HTML大雪纷飞HTML大雪纷飞-CSDN博客
14HTML跨年烟花HTML跨年烟花-CSDN博客
15HTML跳动的爱心HTML跳动的爱心-CSDN博客
16HTML动态爱心HTML动态爱心-CSDN博客
17HTML浪漫星空https://want595.blog.csdn.net/article/details/139799620
18
19
20
21
22
23
24
25
26
27

写在后面

我是一只有趣的兔子,感谢你的喜欢!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/30214.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Redis】基于Redission实现分布式锁(代码实现)

目录 基于Redission实现分布式锁解决商品秒杀超卖的场景&#xff1a; 1.引入依赖&#xff1a; 2.加上redis的配置&#xff1a; 3.添加配置类&#xff1a; 4.编写代码实现&#xff1a; 5.模拟服务器分布式集群的情况&#xff1a; 1.右键点击Copy Configuration 2.点击Modi…

怎么投资中证全指证券公司指数?

中证全指证券公司指数的代码是399975&#xff0c;有50只成分股&#xff0c;几乎包含了市场上所有主要的证券公司&#xff0c;算是指数基金中投资证券行业的不二选择。 根据天天基金的数据显示&#xff0c;市面上有31只跟踪该指数的基金&#xff0c;规模最大的是南方中证全指证…

【Java面试】二十二、JVM篇(下):JVM参数调优与排查

文章目录 1、JVM的参数在哪里设置2、常见的JVM调优参数有哪些3、常见的JVM调优工具有哪些4、Java内存泄漏的排查思路5、CPU飙高的排查思路 1、JVM的参数在哪里设置 war包部署&#xff0c;在tomcat中设置&#xff0c;修改TOMCAT_HOME/bin/catalina.sh 文件 jar包启动&#xff0…

jpg格式图片无法打开可以修复吗?有哪些方法?

JPG的图片打不开怎么办呢&#xff1f;当JPG图片打不开的时候&#xff0c;我们需要先了解下具体的原因&#xff0c;是因为格式不支持&#xff0c;还是因为图片文件损坏。不同的原因&#xff0c;解决的方法也会不同&#xff0c;比如图片损坏&#xff0c;我们就需要对图片修复处理…

web爬虫笔记:js逆向案例九(某多多 anti_content参数)补环境流程

web爬虫笔记:js逆向案例九(某多多 anti_content参数)补环境流程 一、目标网站:aHR0cHM6Ly9tb2JpbGUueWFuZ2tlZHVvLmNvbS8= 二、接口分析 1、快速定位加密位置(通过搜索/cells/hub/v3快速定位到加密js文件) 2、通过分析可知&#

双系统下,如何隐藏另一个系统分区?

前言 最近有小伙伴在公众号下留言&#xff1a; 小伙伴说&#xff1a;“双系统时&#xff0c;非当前系统的系统盘能不能屏蔽&#xff1f;&#xff01;比如Win7的系统盘在Win10系统时&#xff0c;盘符成了D盘&#xff0c;安装应用软件时&#xff0c;有些文件就到了D盘&#xff0…

DuDuTalk:智能电子录音工牌在销售场景的应用价值

在快速变化的市场环境中&#xff0c;销售团队面临着日益激烈的竞争和不断变化的客户需求。为了提升销售效率、优化客户体验并加强团队协作&#xff0c;越来越多的企业开始采用智能电子录音工牌作为销售场景中的关键工具。本文将从多个方面探讨智能电子录音工牌在销售场景中的应…

Java17 --- SpringSecurity之授权

目录 一、授权 1.1、基于request的授权 1.2、请求未授权处理 1.3、角色分配 1.4、基于方法授权 一、授权 1.1、基于request的授权 Beanpublic SecurityFilterChain securityFilterChain(HttpSecurity httpSecurity) throws Exception {httpSecurity.sessionManagement…

一图读懂腾讯云EdgeOne Open Edge平台

为了鼓励更多开发者参与、共同构建和改进边缘应用&#xff0c;腾讯云EdgeOne面向广大开发者&#xff0c;打造了技术开放共创平台——OpenEdge&#xff0c;该平台是国内首个全免费的边缘应用平台&#xff0c;不仅进一步开放了腾讯云遍布世界各地的边缘节点能力&#xff0c;还可以…

Ollama(docker)+ Open Webui(docker)+Comfyui

Windows 系统可以安装docker desktop 相对比较好用一点&#xff0c;其他的应该也可以 比如rancher desktop podman desktop 安装需要windows WSL 安装ollama docker docker run -d --gpusall -v D:\ollama:/root/.ollama -p 11434:11434 --name ollama ollama/ollama 这里…

微服务必备容器化技术

文章目录 docker介绍与安装及上手应用什么是容器化技术&#xff1f;为什么需要学习docker&#xff1f;如何理解dockerdocker下载与安装docker的基础组成docker体验 dockerfile介绍并创建go-zero环境容器docker的基础组成从容器构建属于go环境的容器基于dockerfile构建go容器镜像…

最新技术:跨境电商源码,应对多国市场需求,让您轻松开展全球业务!

随着全球化进程的不断推进&#xff0c;跨境电商已成为企业拓展国际市场的重要途径。为了满足不同国家和地区消费者不断增长的需求&#xff0c;跨境电商源码应运而生&#xff0c;为企业提供了便捷高效的全球化业务发展方案。 一、全球化运营的关键 跨境电商源码的核心功能在于…

基本循环神经网络(RNN)

RNN背景&#xff1a;RNN与FNN 在前馈神经网络中&#xff0c;信息的传递是单向的&#xff0c;这种限制虽然使得网络变得更容易学习&#xff0c;但在一定程度上也减弱了神经网络模型的能力。 在生物神经网络中&#xff0c;神经元之间的连接关系要复杂的多。前馈神经网络可以看着…

【小学期】参考项目-Java初学者的15个练手项目推荐

Java初学者的15个练手项目推荐 很高兴看到大家已经掌握了Java的基础知识。为了帮助大家巩固和提高编程技能&#xff0c;我为你们准备了15个简单的Java项目。这些项目不仅覆盖了增删改查&#xff08;CRUD&#xff09;操作&#xff0c;还能帮助大家熟悉面向对象编程、异常处理、…

PySide(PyQt)的特殊按钮(互锁、自锁、独占模式)

界面图: Qt Designer中创建窗口,放置一个QGroupBox,命名为btnStation,这就是自定义的按钮站,按钮站里放置6个按钮。自锁按钮相当于电器中的自锁功能的按钮,每按一次状态反转并保持不变。独占按钮也是自锁功能的按钮,不同的是当独占按钮为ON时,其余所有按钮均被置为OFF…

QT与VS的区别?使用QT的好处?

Qt 和 Visual Studio (VS) 是两个不同的概念&#xff0c;它们在软件开发领域扮演着不同的角色&#xff1a; Qt&#xff1a; Qt 是一个跨平台的应用程序和用户界面框架&#xff0c;使用 C 编写&#xff0c;支持多种编程语言的绑定。它提供了一套丰富的工具和库&#xff0c;用于…

SmartEDA革新电路设计:告别繁琐,轻松步入智能时代!

在数字化浪潮席卷而来的今天&#xff0c;电路设计的复杂性和繁琐性一直是工程师们面临的难题。然而&#xff0c;随着科技的进步&#xff0c;一款名为SmartEDA的电路设计工具应运而生&#xff0c;它以智能化、高效化的特点&#xff0c;彻底颠覆了传统电路设计的方式&#xff0c;…

vue3写一个定时器

vue3没有this&#xff0c;取而代之的是proxy 所以在定时器的写法上也有所不同 话不多说直接上代码 <template> <p>剩余时间:{{ count }}</p> </template> export default{ const seconds ref(1800);//定义一下秒数&#xff0c;根据秒数来计算&…

什么是 Linux From Scratch (LFS)?

Linux From Scratch (LFS) 是一个项目和一本书&#xff0c;指导用户从头开始构建自己的自定义Linux系统&#xff0c;而不是使用现成的Linux发行版。LFS项目由 Gerard Beekmans 在1999年创建&#xff0c;旨在帮助用户了解Linux的内部工作原理&#xff0c;并提供对系统的完全控制…

JavaScript 逻辑赋值运算符(=,||=,??=)与可选链运算符(?. ??)

一、 短路运算 短路运算是一种常见的逻辑运算方式&#xff0c;其核心机制是在运算过程中进行一些优化和简化&#xff0c;从而提高计算效率和减少资源消耗。特别是在处理逻辑与&#xff08;&&&#xff09;和逻辑或&#xff08;||&#xff09;运算时&#xff0c;如果左侧…