❤️创意网页：打造炫酷网页 - 旋转彩虹背景中的星星动画
✨博主：命运之光
🌸专栏：Python星辰秘典
🐳专栏：web开发（简单好用又好看）
❤️专栏：Java经典程序设计
☀️博主的其他文章：点击进入博主的主页
前言：欢迎踏入我的Web项目专栏，一段神奇而令人陶醉的数字世界！
🌌在这里，我将带您穿越时空，揭开属于Web的奥秘。通过HTML、CSS和JavaScript的魔力，我创造了一系列令人惊叹的Web项目，它们仿佛是从梦境中涌现而出。
🌌在这个专栏中，您将遇到华丽的界面，如流星划过夜空般迷人；您将感受到动态的交互，如魔法般让您沉浸其中；您将探索响应式设计的玄妙，让您的屏幕变幻出不同的绚丽景象。
🌌无论您是一个探险家还是一位嗜血的代码巫师，这个专栏将成为您的魔法书。我将分享每个项目的秘密，解开编码的谜题，让您也能够拥有制作奇迹的力量。
🌌准备好了吗？拿起您的键盘，跟随我的指引，一起进入这个神秘而充满惊喜的数字王国。在这里，您将找到灵感的源泉，为自己创造出一段奇幻的Web之旅！
目录
引言
动态图展示
静态图展示
准备工作
HTML 结构
JavaScript 代码
运行效果
完整代码
代码的使用方法（超简单什么都不用下载）
🍓1.打开记事本
🍓2.将上面的源代码复制粘贴到记事本里面将文件另存为HTML文件点击保存即可
🍓3.打开html文件（大功告成(●'◡'●)）
总结
引言
在这个技术博客中，我们将学习如何使用HTML5 Canvas和JavaScript创建一个炫酷的网页效果。我们将打造一个动态的旋转彩虹背景，并在其中添加一个可爱的旋转星星动画。通过本博客，您将了解如何使用Canvas绘制彩虹渐变背景和绘制旋转的星星，以及如何通过动画实现星星的旋转效果。
动态图展示
静态图展示
准备工作
在开始之前，请确保您具备以下条件：
- 基本的HTML、CSS和JavaScript知识。
- 一个支持HTML5的现代web浏览器（推荐使用最新版本的Chrome、Firefox、Safari等）。
HTML 结构
首先，让我们创建一个HTML文件，并添加必要的结构。
<!DOCTYPE html>
<html>
<head><title>炫酷的网页</title><style>body {margin: 0;overflow: hidden;}canvas {display: block;}</style>
</head>
<body><canvas id="myCanvas"></canvas><script>// JavaScript代码将在下面添加</script>
</body>
</html>
在这个HTML结构中，我们定义了一个Canvas元素，用于绘制我们的炫酷网页效果。
JavaScript 代码
现在，让我们添加JavaScript代码来实现炫酷的网页效果。
<!-- ... 上面的HTML代码 ... --><script>const canvas = document.getElementById("myCanvas");const ctx = canvas.getContext("2d");const width = window.innerWidth;const height = window.innerHeight;canvas.width = width;canvas.height = height;// 创建彩虹色渐变背景const gradient = ctx.createLinearGradient(0, 0, width, height);gradient.addColorStop(0, "red");gradient.addColorStop(0.17, "orange");gradient.addColorStop(0.33, "yellow");gradient.addColorStop(0.5, "green");gradient.addColorStop(0.67, "blue");gradient.addColorStop(0.83, "indigo");gradient.addColorStop(1, "violet");ctx.fillStyle = gradient;ctx.fillRect(0, 0, width, height);// 创建一个旋转的星星function drawStar(cx, cy, spikes, outerRadius, innerRadius) {let rot = Math.PI / 2 * 3;let x = cx;let y = cy;let step = Math.PI / spikes;ctx.beginPath();ctx.moveTo(cx, cy - outerRadius);for (let i = 0; i < spikes; i++) {x = cx + Math.cos(rot) * outerRadius;y = cy + Math.sin(rot) * outerRadius;ctx.lineTo(x, y);rot += step;x = cx + Math.cos(rot) * innerRadius;y = cy + Math.sin(rot) * innerRadius;ctx.lineTo(x, y);rot += step;}ctx.lineTo(cx, cy - outerRadius);ctx.closePath();ctx.lineWidth = 5;ctx.strokeStyle = "#fff";ctx.stroke();ctx.fillStyle = "#f9f9f9";ctx.fill();}// 使星星旋转动画let rotationAngle = 0;function animate() {rotationAngle += 0.01;ctx.clearRect(0, 0, width, height);ctx.fillStyle = gradient;ctx.fillRect(0, 0, width, height);ctx.save();ctx.translate(width / 2, height / 2);ctx.rotate(rotationAngle);drawStar(0, 0, 5, 80, 40);ctx.restore();requestAnimationFrame(animate);}animate();
</script>
</body>
</html>
以上代码中，我们创建了一个绘制彩虹渐变背景的函数和一个绘制旋转星星的函数。然后，我们使用Canvas绘制了彩虹渐变背景，并在其中添加了一个旋转的星星动画。通过旋转Canvas的坐标系，我们实现了星星的旋转效果。
运行效果
将上述HTML代码保存为一个HTML文件，并在支持HTML5的现代web浏览器中打开它。您将会看到一个炫酷的网页，其中有一个彩虹色渐变背景和一个可爱的旋转星星动画。随着时间的推移，星星会不断旋转，营造出一个令人愉悦的视觉效果。
完整代码
<!DOCTYPE html>
<html>
<head><title>炫酷的网页</title><style>body {margin: 0;overflow: hidden;}canvas {display: block;}</style>
</head>
<body><canvas id="myCanvas"></canvas><script>const canvas = document.getElementById("myCanvas");const ctx = canvas.getContext("2d");const width = window.innerWidth;const height = window.innerHeight;canvas.width = width;canvas.height = height;// 创建彩虹色渐变背景const gradient = ctx.createLinearGradient(0, 0, width, height);gradient.addColorStop(0, "red");gradient.addColorStop(0.17, "orange");gradient.addColorStop(0.33, "yellow");gradient.addColorStop(0.5, "green");gradient.addColorStop(0.67, "blue");gradient.addColorStop(0.83, "indigo");gradient.addColorStop(1, "violet");ctx.fillStyle = gradient;ctx.fillRect(0, 0, width, height);// 创建一个旋转的星星function drawStar(cx, cy, spikes, outerRadius, innerRadius) {let rot = Math.PI / 2 * 3;let x = cx;let y = cy;let step = Math.PI / spikes;ctx.beginPath();ctx.moveTo(cx, cy - outerRadius);for (let i = 0; i < spikes; i++) {x = cx + Math.cos(rot) * outerRadius;y = cy + Math.sin(rot) * outerRadius;ctx.lineTo(x, y);rot += step;x = cx + Math.cos(rot) * innerRadius;y = cy + Math.sin(rot) * innerRadius;ctx.lineTo(x, y);rot += step;}ctx.lineTo(cx, cy - outerRadius);ctx.closePath();ctx.lineWidth = 5;ctx.strokeStyle = "#fff";ctx.stroke();ctx.fillStyle = "#f9f9f9";ctx.fill();}// 使星星旋转动画let rotationAngle = 0;function animate() {rotationAngle += 0.01;ctx.clearRect(0, 0, width, height);ctx.fillStyle = gradient;ctx.fillRect(0, 0, width, height);ctx.save();ctx.translate(width / 2, height / 2);ctx.rotate(rotationAngle);drawStar(0, 0, 5, 80, 40);ctx.restore();requestAnimationFrame(animate);}animate();</script>
</body>
</html>
代码的使用方法（超简单什么都不用下载）
🍓1.打开记事本
🍓2.将上面的源代码复制粘贴到记事本里面将文件另存为HTML文件点击保存即可
🍓3.打开html文件（大功告成(●'◡'●)）
总结
在本篇博客中，我们学习了如何使用HTML5 Canvas和JavaScript创建一个炫酷的网页效果。通过绘制彩虹渐变背景和旋转的星星动画，我们成功地打造了一个令人陶醉的视觉效果。
我们希望这个项目能够带给您一些灵感，以及在web开发中使用Canvas和动画的实践经验。您可以进一步扩展这个例子，添加更多元素和动态效果，创造出更加丰富多彩的炫酷网页。
Happy coding!本章的内容就到这里了，觉得对你有帮助的话就支持一下博主把~
🌌点击下方个人名片，交流会更方便哦~
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
相关文章：
❤️创意网页：打造炫酷网页 - 旋转彩虹背景中的星星动画
✨博主：命运之光 🌸专栏：Python星辰秘典 🐳专栏：web开发（简单好用又好看） ❤️专栏：Java经典程序设计 ☀️博主的其他文章：点击进入博主的主页 前言：欢迎踏入…...
react常用知识点
React是一个用于构建用户界面的JavaScript库。以下是React常用的知识点： 组件：React将用户界面分解成小而独立的组件，每个组件都有自己的状态和属性，并且可以通过组合这些组件来构建复杂的用户界面。 // 函数组件示例 function We…...
iOS开发-QLPreviewController与UIDocumentInteractionController显示文档
iOS开发-QLPreviewController与UIDocumentInteractionController显示文档 在应用中,我们有时想预览文件, 可以使用QLPreviewController与UIDocumentInteractionController 一、QLPreviewController与UIDocumentInteractionController QLPreviewController是一个 UIViewContr…...
八、用 ChatGPT 帮助排查生产事故
目录 一、实验介绍 二、背景 三、故障排查概述 3.1 生产环境故障排查涉及的角色...
WPF实战学习笔记25-首页汇总
注意：本实现与视频不一致。本实现中单独做了汇总接口，而视频中则合并到国todo接口当中了。 添加汇总webapi接口添加汇总数据客户端接口总数据客户端接口对接3首页数据模型 添加数据汇总字段类 新建文件MyToDo.Share.Models.SummaryDto using System;…...
FreeRTOS源码分析-7 消息队列
目录 1 消息队列的概念和作用 2 应用 2.1功能需求 2.2接口函数API 2.3 功能实现 3 消息队列源码分析 3.1消息队列控制块 3.2消息队列创建 3.3消息队列删除 3.4消息队列在任务中发送 3.5消息队列在中断中发送 3.6消息队列在任务中接收 3.7消息队列在中断中接收 1 消…...
机器学习深度学习——权重衰减
👨🎓作者简介：一位即将上大四，正专攻机器学习的保研er 🌌上期文章：机器学习&&深度学习——模型选择、欠拟合和过拟合 📚订阅专栏：机器学习&&深度学习 希望文章对你…...
【Linux】线程互斥 -- 互斥锁 | 死锁 | 线程安全
引入互斥初识锁互斥量mutex锁原理解析 可重入VS线程安全STL中的容器是否是线程安全的? 死锁 引入 我们写一个多线程同时访问一个全局变量的情况(抢票系统)，看看会出什么bug： // 共享资源， 火车票 int tickets 10000; //新线程执行方法 vo…...
【vue-pdf】PDF文件预览插件
1 插件安装 npm install vue-pdf vue-pdf GitHub：https://github.com/FranckFreiburger/vue-pdf#readme 参考文档：https://www.cnblogs.com/steamed-twisted-roll/p/9648255.html catch报错：vue-pdf组件报错vue-pdf Cannot read properti…...
Flink集群运行模式--Standalone运行模式
Flink集群运行模式--Standalone运行模式 一、实验目的二、实验内容三、实验原理四、实验环境五、实验步骤5.1 部署模式5.1.1 会话模式（Session Mode）5.1.2 单作业模式（Per-Job Mode）5.1.3 应用模式（Application Mode&a…...
Spring整合JUnit实现单元测试
Spring整合JUnit实现单元测试 一、引言 在软件开发过程中，单元测试是保证代码质量和稳定性的重要手段。JUnit是一个流行的Java单元测试框架，而Spring是一个广泛应用于Java企业级开发的框架。本文将介绍如何使用Spring整合JUnit实现单元测试，…...
Spring Boot学习路线1
Spring Boot是什么？ Spring Boot是基于Spring Framework构建应用程序的框架，Spring Framework是一个广泛使用的用于构建基于Java的企业应用程序的开源框架。Spring Boot旨在使创建独立的、生产级别的Spring应用程序变得容易，您可以"只是…...
管理类联考——写作——论说文——实战篇——标题篇
角度3——4种材料类型、4个立意对象、5种写作态度 经过审题立意后，我们要根据我们的立意，确定一个主题，这个主题必须通过文章的标题直接表达出来。 标题的基本要求 主题清晰，态度明确 第一，阅卷人看到一篇论说文的标…...
idea中设置maven本地仓库和自动下载依赖jar包
1.下载maven 地址：maven3.6.3 解压缩在D:\apache-maven-3.6.3-bin\apache-maven-3.6.3\目录下新建文件夹repository打开apache-maven-3.6.3-bin\apache-maven-3.6.3\conf文件中的settings.xml编辑：新增本地仓库路径 <localRepository>D:\apache-…...
前缀和差分
前缀和 前缀和：一段序列里的前n项和 给出n个数，在给出q次问询，每次问询给出L、R，快速求出每组数组中一段L至R区间的和 给出一段数组，每次问询为求出l到r区间的和 普通方法：L到R进行遍历，那么…...
Golang GORM 模型定义
模型定义 参考文档：https://gorm.io/zh_CN/docs/models.html 模型一般都是普通的 Golang 的结构体，Go的基本数据类型，或者指针。 模型是标准的struct,由Go的基本数据类型、实现了Scanner和Valuer接口的自定义类型及其指针或别名组成&#x…...
微服务的各种边界在架构演进中的作用
演进式架构 在微服务设计和实施的过程中，很多人认为：“将单体拆分成多少个微服务，是微服务的设计重点。”可事实真的是这样吗？其实并非如此！ Martin Fowler 在提出微服务时，他提到了微服务的一个重要特征—…...
使用 docker-compose 一键部署多个 redis 实例
目录 1. 前期准备 2. 导入镜像 3. 部署redis master脚本 4. 部署redis slave脚本 5. 模板文件 6. 部署redis 7. 基本维护 1. 前期准备 新部署前可以从仓库（repository）下载 redis 镜像，或者从已有部署中的镜像生成文件： …...
14-测试分类
1.按照测试对象划分 ①界面测试 软件只是一种工具，软件与人的信息交流是通过界面来进行的，界面是软件与用户交流的最直接的一层，界面的设计决定了用户对设计的软件的第一印象。界面如同人的面孔，具有吸引用户的直接优势…...
打开域名跳转其他网站，官网被黑解决方案（Linux）
某天打开网站，发现进入首页，马上挑战到其他赌博网站。 事不宜迟，不能让客户发现，得马上解决 我的网站跳转到这个域名了 例如网站跳转到 k77.cc 就在你们部署的代码的当前文件夹下面，执行下如下命令 find -type …...
【大模型RAG】拍照搜题技术架构速览：三层管道、两级检索、兜底大模型
摘要 拍照搜题系统采用“三层管道（多模态 OCR → 语义检索 → 答案渲染）、两级检索（倒排 BM25 向量 HNSW）并以大语言模型兜底”的整体框架： 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后，分别用…...
使用VSCode开发Django指南
使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架，专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用，其中包含三个使用通用基本模板的页面。在此…...
突破不可导策略的训练难题：零阶优化与强化学习的深度嵌合
强化学习（Reinforcement Learning, RL）是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程，然后使用强化学习的Actor-Critic机制（中文译作“知行互动”机制），逐步迭代求解…...
Java 8 Stream API 入门到实践详解
一、告别 for 循环！ 传统痛点： Java 8 之前，集合操作离不开冗长的 for 循环和匿名类。例如，过滤列表中的偶数： List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...
.Net Framework 4/C# 关键字（非常用，持续更新...）
一、is 关键字 is 关键字用于检查对象是否于给定类型兼容，如果兼容将返回 true，如果不兼容则返回 false，在进行类型转换前，可以先使用 is 关键字判断对象是否与指定类型兼容，如果兼容才进行转换，这样的转换是安全的。 例如有：首先创建一个字符串对象，然后将字符串对象隐…...
OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波（Mean Shift Filtering）函数meanShiftFiltering()
操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述 在 GPU 上对图像执行 均值漂移滤波（Mean Shift Filtering），用于图像分割或平滑处理。 该函数将输入图像中的…...
学校时钟系统，标准考场时钟系统，AI亮相2025高考，赛思时钟系统为教育公平筑起“精准防线”
2025年#高考 将在近日拉开帷幕，#AI 监考一度冲上热搜。当AI深度融入高考，#时间同步 不再是辅助功能，而是决定AI监考系统成败的“生命线”。 AI亮相2025高考，40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕，江西、…...
关键领域软件测试的突围之路：如何破解安全与效率的平衡难题
在数字化浪潮席卷全球的今天，软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件，这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下，实现高效测试与快速迭代？这一命题正考验着…...
：观察者模式)
JS设计模式(4)：观察者模式
JS设计模式(4):观察者模式 一、引入 在开发中，我们经常会遇到这样的场景：一个对象的状态变化需要自动通知其他对象，比如： 电商平台中，商品库存变化时需要通知所有订阅该商品的用户；新闻网站中࿰…...
Go语言多线程问题
打印零与奇偶数（leetcode 1116） 方法1：使用互斥锁和条件变量 package mainimport ("fmt""sync" )type ZeroEvenOdd struct {n intzeroMutex sync.MutexevenMutex sync.MutexoddMutex sync.Mutexcurrent int…...