当前位置： 首页 > news >正文

HTML5 Canvas与JavaScript携手绘制动态星空背景

news 2025/7/7 6:40:09

目录

一、程序代码

二、代码原理

三、运行效果

一、程序代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>星空背景</title>
</head>
<body style="overflow-x:hidden;"><canvas id="canvas"></canvas> <!-- 创建一个画布元素 -->
</body><script>// 获取画布元素和2D上下文canvas = document.getElementById('canvas');ctx = canvas.getContext('2d'); // 设置画布宽度和高度w = canvas.width = window.innerWidth;		h = canvas.height = window.innerHeight-50; hue = 217; // 设定颜色stars = []; // 存储星星的数组count = 0,maxStars = 1500; // 星星数量// 创建用于渲染星星的小画布canvas2 = document.createElement('canvas');w2 = canvas2.width = 100;h2 = canvas2.height = 100;ctx2 = canvas2.getContext("2d");gradientCache = ctx2.createRadialGradient(w2 / 2, h2 / 2, 0, w2 / 2, h2 / 2, w2 / 2);gradientCache.addColorStop(0.025, '#fff');gradientCache.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)');gradientCache.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)');gradientCache.addColorStop(1, 'transparent');ctx2.fillStyle = gradientCache;ctx2.beginPath();ctx2.arc(w2 / 2, h2 / 2, w2 / 2, 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;}// 构造函数用于创建星星对象Star = function() {this.orbitRadius = random(maxOrbit(w, h));this.radius = random(60, this.orbitRadius) / 10;this.orbitX = w / 2;this.orbitY = h / 2;this.timePassed = random(2, maxStars);	this.speed = random(this.orbitRadius) / 120000;this.alpha = random(2, 10) / 10;count++;stars[count] = this;}// 在画布上绘制星星Star.prototype.draw = function() {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 start() {ctx.globalCompositeOperation = 'source-over';ctx.globalAlpha = 1;ctx.fillStyle = 'hsla(' + hue + ', 64%,6%,0.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(start);}start(); // 调用开始函数
</script>
</html>

二、代码原理

这段代码通过 HTML5 的 <canvas> 元素和 JavaScript 实现了一个星空背景效果。首先，它在页面加载时创建了一个全屏大小的画布，并使用 JavaScript 生成了多个具有不同运动轨道的星星对象。每颗星星都具有随机的半径、位置、运动速度和闪烁效果。通过使用定时器和 requestAnimationFrame 方法，实现了星星的运动和闪烁效果，从而呈现出逼真的星空背景。整体效果是一个动态的、具有视差效果的星空背景，为网页增添了视觉吸引力。

  1. 首先是 HTML 结构部分：

    • 定义了一个 HTML 文档，并设置了字符集为 UTF-8。
    • 设置了页面的标题为“星空背景”。
    • 在 body 中定义了一个画布元素 <canvas>，并指定了一个 id 为 "canvas"。

  2. 紧接着是 JavaScript 部分：

    • 获取了 <canvas> 元素以及其 2D 绘图上下文。
    • 设置了画布的宽度和高度为窗口的宽度和高度减去 50。
    • 定义了一些变量，如颜色值、存储星星的数组、星星数量等。

  3. 创建用于渲染星星的小画布：

    • 创建了一个新的 <canvas> 元素作为缓存画布。
    • 设置了缓存画布的宽高，并获取其 2D 上下文。
    • 创建了一个径向渐变对象，定义了星星的颜色渐变规则。
    • 绘制了一个圆形填充的图案，代表星星的外观。

  4. 定义了两个辅助函数：

    • random(min, max) 用于生成指定范围内的随机数。
    • maxOrbit(x, y) 用于确定星星轨道的最大半径。

  5. 创建了一个构造函数 Star 用于创建星星对象：

    • 初始化了星星的轨道半径、半径大小、位置等属性。
    • 将每个创建的星星对象存储到 stars 数组中。

  6. 定义了 Star 原型对象的 draw 方法：

    • 根据时间变化计算星星的位置坐标。
    • 控制星星闪烁效果的透明度变化。
    • 使用缓存画布绘制星星。
    • 更新星星的时间，实现星星的运动效果。

  7. 创建了一定数量的星星对象，并将其存储在 stars 数组中。

  8. 定义了 start 函数开始绘制星空背景：

    • 设置了画布的全局合成操作模式和透明度。
    • 填充了一个半透明的矩形作为背景。
    • 设置了全局合成操作模式为 'lighter'，实现星星的叠加效果。
    • 遍历所有星星对象，并调用其 draw 方法进行绘制。
    • 使用 window.requestAnimationFrame 实现动画效果。

  9. 调用 start 函数，开始绘制星空背景效果。

三、运行效果

相关文章：

HTML5 Canvas与JavaScript携手绘制动态星空背景

目录 一、程序代码 二、代码原理 三、运行效果 一、程序代码 <!DOCTYPE html> <html> <head> <meta charset"UTF-8"> <title>星空背景</title> </head> <body style"overflow-x:hidden;"><canvas …...

编程日记 2024/2/20 1:04:17

如何优雅地与ChatGPT对话？

ChatGPT已经发布了一年之久了&#xff0c;但你真的会使用ChatGPT吗&#xff1f;同一个问题&#xff0c;不同的问法得到的答案可能千差万别&#xff0c;你可以把ChatGPT当作一个知识面很广的专家&#xff0c;他上知天文下知地理&#xff0c;但他无法直接知道你的意图&#xff0c…...

编程日记 2024/2/20 1:00:11

AI提示工程实战：从零开始利用提示工程学习应用大语言模型【文末送书-19】

文章目录 背景什么是提示工程&#xff1f;从零开始&#xff1a;准备工作设计提示调用大语言模型 实际应用示例文字创作助手代码生成持续优化与迭代数据隐私与安全性可解释性与透明度总结 AI提示工程实战&#xff1a;从零开始利用提示工程学习应用大语言模型【文末送书-19】⛳粉…...

编程日记 2024/2/20 0:57:09

量子算法入门——3.狄拉克符号与量子态（3）

3. 狄拉克符号的数学基础 左矢是右矢的共轭转置 上标*表示共轭 算符就是对狄拉克符号进行操作&#xff0c;就是相当于矩阵操作向量&#xff0c;算符对应本征值和本征态 本征值&#xff1a;拉伸x、y向量的程度本征态&#xff1a;x、y向量 上标匕首&#x1f5e1;符号&#xf…...

编程日记 2024/2/20 0:53:05

c++ STL系列——（三）list

目录 引言 list的特点 list的用法 list与其他容器的比较 结论 引言 在C STL中&#xff0c;list 是一个非常灵活且功能强大的双向链表容器&#xff0c;它允许存储任意类型的元素&#xff0c;并提供了丰富的操作函数&#xff0c;包括插入、删除、排序、查找以及对容器的遍历…...

编程日记 2024/2/20 0:48:00

软考29-上午题-排序

一、排序的基本概念 1-1、稳定性 稳定性指的是相同的数据所在的位置经过排序后是否发生变化。若是排序后&#xff0c;次序不变&#xff0c;则是稳定的。 1-2、归位 每一趟排序能确定一个元素的最终位置。 1-3、内部排序 排序记录全部存放在内存中进行排序的过程。 1-4、外部…...

编程日记 2024/2/20 0:46:59

【详细流程】vue+Element UI项目中使用echarts绘制圆环图 折线图 饼图 柱状图

vueElement UI项目中数据分析功能需要用到圆环图 折线图 饼图 柱状图等&#xff0c;可视化图形分析 安装流程及示例 1.安装依赖 npm install echarts --save2.在main.js中引入并挂载echarts import echarts from echarts Vue.prototype.$echarts echarts3.在需要使用echart…...

编程日记 2024/2/20 0:45:58

Unity之XR Interaction Toolkit如何在VR中实现一个可以拖拽的UI

前言 普通的VR项目中，我们常见的UI都是一个3D的UI，放置在场景中的某个位置，方便我们使用射线点击。但是为了更好的体验，我们可能会有跟随头显的UI，或者可拖拽的UI，这样更方便用户去操作。 所以我们今天的需求就是：如何基于XR Interaction Toolkit 插件 在VR中使用手柄射…...

编程日记 2024/2/20 0:44:57

开源项目热度榜单

题目描述 某个开源社区希望将最近热度比较高的开源项目出一个榜单&#xff0c;推荐给社区里面的开发者。对于每个开源项目&#xff0c;开发者可以进行关注(watch)、收藏(star)、fork、提issue、提交合并请求(MR)等。 数据库里面统计了每个开源项目关注、收藏、fork、issue、M…...

编程日记 2024/2/20 0:43:56

Ubuntu系统搭建HadSky论坛并结合内网穿透实现无公网ip远程访问

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…...

编程日记 2024/2/20 0:42:55

gowin GW1N4 LED

基于上已篇文章基础上增加LED闪烁的功能 《gowin GW1N4 OSC IP 使用》 gowin GW1N4 OSC IP 使用-CSDN博客 https://blog.csdn.net/wzy15965343032/article/details/136172184?spm1001.2014.3001.5502 代码&#xff1a; module osc_test(input rst_n,output test_clk,output …...

编程日记 2024/2/20 0:41:54

Linux ipvlan详解（l2、l3、l3s和bridge、private和vepa模式）

Linux ipvlan详解&#xff0c;测试l2、l3、l3s和bridge、private和vepa模式。 最近在看Docker的网络&#xff0c;看到关于ipvlan网络的介绍。查阅了相关资料&#xff0c;记录如下。 参考 1.图解几个与Linux网络虚拟化相关的虚拟网卡-VETH/MACVLAN/MACVTAP/IPVLAN 2.IPVlan 详…...

编程日记 2024/2/20 0:40:53

理解并实现OpenCV中的图像平滑技术

导读 图像模糊&#xff08;也称为图像平滑&#xff09;是计算机视觉和图像处理中的基本操作之一。模糊图像通常是噪声减少、边缘检测和特征提取等应用的第一步。在本博客中&#xff0c;我们将重点介绍如何使用Python中的OpenCV库应用多种模糊技术。 理论概述&#xff1a; 基本…...

编程日记 2024/2/20 0:38:50

ChatGPT高效提问—prompt实践（白领助手）

ChatGPT高效提问—prompt实践&#xff08;白领助手&#xff09; ​ 随着社会的不断发展&#xff0c;白领的比例越来越高。白领的工作通常较为繁忙&#xff0c;需要管理复杂的项目。工作量大、要求高、任务紧急&#xff0c;时间分配不当部分可能导致工作效率低下&#xff0c;任…...

编程日记 2024/2/20 0:37:49

Code Composer Studio (CCS) - Comment (注释)

Code Composer Studio [CCS] - Comment [注释] References Add Block Comment: 选中几行代码 -> 鼠标右键 -> Source -> Add Block Comment shortcut key: Ctrl Shift / Remove Block Comment: 选中几行代码->鼠标右键->Source->Remove Block Comment s…...

编程日记 2024/2/20 0:33:45

springboot/ssm校园菜鸟驿站管理系统Java校园快递取件管理系统

springboot/ssm校园菜鸟驿站管理系统Java校园快递取件管理系统 开发语言&#xff1a;Java 框架&#xff1a;springboot&#xff08;可改ssm&#xff09; vue JDK版本&#xff1a;JDK1.8&#xff08;或11&#xff09; 服务器&#xff1a;tomcat 数据库&#xff1a;mysql 5.…...

编程日记 2024/2/20 0:32:44

【Mybatis】TypeHandler使用

引言 在使用MyBatis进行项目开发时&#xff0c;我们经常会遇到Java类型与数据库类型不匹配的情况。为了解决这一问题&#xff0c;MyBatis提供了一个强大的机制——TypeHandler。TypeHandler是MyBatis中一个用于处理Java类型和数据库类型转换的组件&#xff0c;它在MyBatis进行…...

编程日记 2024/2/20 0:30:42

[计算机网络]---网络编程套接字

前言 作者&#xff1a;小蜗牛向前冲 名言&#xff1a;我可以接受失败&#xff0c;但我不能接受放弃 如果觉的博主的文章还不错的话&#xff0c;还请点赞&#xff0c;收藏&#xff0c;关注&#x1f440;支持博主。如果发现有问题的地方欢迎❀大家在评论区指正 目录 一、基础知识…...

编程日记 2024/2/20 0:28:40

分布式文件系统 SpringBoot+FastDFS+Vue.js【二】

分布式文件系统 SpringBootFastDFSVue.js【二】 六、实现上传功能并展示数据6.1.创建数据库6.2.创建spring boot项目fastDFS-java6.3.引入依赖6.3.fastdfs-client配置文件6.4.跨域配置GlobalCrosConfig.java6.5.创建模型--实体类6.5.1.FastDfsFile.java6.5.2.FastDfsFileType.j…...

编程日记 2024/2/20 0:26:38

开源软件：推动软件行业繁荣的力量

文章目录 &#x1f4d1;引言开源软件的优势分析开放性与透明度低成本与灵活性创新与协作 开源软件对软件行业的影响推动技术创新和进步促进软件行业的合作与交流培养人才和提高技能促进软件行业的可持续发展 结语 &#x1f4d1;引言 随着信息技术的飞速发展&#xff0c;软件已经…...

编程日记 2024/2/20 0:25:37

龙虎榜——20250610

上证指数放量收阴线&#xff0c;个股多数下跌&#xff0c;盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型&#xff0c;指数短线有调整的需求&#xff0c;大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的&#xff1a;御银股份、雄帝科技 驱动…...

编程新知 2025/7/5 9:34:51

（十）学生端搭建

本次旨在将之前的已完成的部分功能进行拼装到学生端&#xff0c;同时完善学生端的构建。本次工作主要包括&#xff1a; 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...

编程新知 2025/7/6 10:30:39

DAY 47

三、通道注意力 3.1 通道注意力的定义 # 新增&#xff1a;通道注意力模块&#xff08;SE模块&#xff09; class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

编程新知 2025/7/6 5:46:14

解锁数据库简洁之道：FastAPI与SQLModel实战指南

在构建现代Web应用程序时&#xff0c;与数据库的交互无疑是核心环节。虽然传统的数据库操作方式&#xff08;如直接编写SQL语句与psycopg2交互&#xff09;赋予了我们精细的控制权&#xff0c;但在面对日益复杂的业务逻辑和快速迭代的需求时&#xff0c;这种方式的开发效率和可…...

编程新知 2025/7/6 5:52:50

【python异步多线程】异步多线程爬虫代码示例

claude生成的python多线程、异步代码示例&#xff0c;模拟20个网页的爬取&#xff0c;每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程&#xff1a;允许程序同时执行多个任务&#xff0c;提高IO密集型任务&#xff08;如网络请求&#xff09;的效率…...

编程新知 2025/7/6 2:44:56

图表类系列各种样式PPT模版分享

图标图表系列PPT模版&#xff0c;柱状图PPT模版&#xff0c;线状图PPT模版&#xff0c;折线图PPT模版&#xff0c;饼状图PPT模版&#xff0c;雷达图PPT模版&#xff0c;树状图PPT模版 图表类系列各种样式PPT模版分享&#xff1a;图表系列PPT模板https://pan.quark.cn/s/20d40aa…...

编程新知 2025/7/5 23:23:23

rnn判断string中第一次出现a的下标

# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写 实现一个RNN网络完成多分类任务 判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...

编程新知 2025/6/21 7:57:44

论文笔记——相干体技术在裂缝预测中的应用研究

目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术&#xff1a;基于互相关的相干体技术&#xff08;Correlation&#xff09;第二代相干体技术&#xff1a;基于相似的相干体技术&#xff08;Semblance&#xff09;基于多道相似的相干体…...

编程新知 2025/7/6 1:39:49

水泥厂自动化升级利器：Devicenet转Modbus rtu协议转换网关

在水泥厂的生产流程中&#xff0c;工业自动化网关起着至关重要的作用&#xff0c;尤其是JH-DVN-RTU疆鸿智能Devicenet转Modbus rtu协议转换网关&#xff0c;为水泥厂实现高效生产与精准控制提供了有力支持。 水泥厂设备众多&#xff0c;其中不少设备采用Devicenet协议。Devicen…...

编程新知 2025/7/5 16:52:17

算法打卡第18天

从中序与后序遍历序列构造二叉树 (力扣106题) 给定两个整数数组 inorder 和 postorder &#xff0c;其中 inorder 是二叉树的中序遍历&#xff0c; postorder 是同一棵树的后序遍历&#xff0c;请你构造并返回这颗 二叉树 。 示例 1: 输入&#xff1a;inorder [9,3,15,20,7…...

编程新知 2025/7/6 18:11:02