❤️创意网页：打造炫酷网页 - 旋转彩虹背景中的星星动画
✨博主：命运之光
🌸专栏：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 …...
Appium+python自动化（十二）- Android UIAutomator
Android团队在4.1版本（API 16）中推出了一款全新的UI自动化测试工具UiAutomator，用来帮助开发人员更有效率的完成App的Debug工作，同时对于测试人员也是一大福音，为什么这么说呢？ UiAutomator提供了以下两种…...
OpenCV CUDA模块图像处理------创建一个模板匹配（Template Matching）对象函数createTemplateMatching()
操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述 创建一个用于在 GPU 上执行模板匹配的 TemplateMatching 对象。 该函数返回一个指向 TemplateMatching 的智能指针（Ptr）…...
PTC过流保护器件工作原理及选型方法
PTC过流保护器件 （Positive Temperature Coefficient，正温度系数热敏电阻）是一种过流保护元件，其工作原理基于电阻值随温度变化的特性。当电路正常工作时，PTC的阻值很小，电流可以顺畅通过；但当…...
PCB特种工艺应用扩展：厚铜、高频与软硬结合板
新能源汽车与消费电子驱动PCB特种工艺创新，厚铜板降阻30%，软硬结合板渗透率年增15%。 1. 厚铜板：新能源高压平台核心 技术突破：猎板PCB量产10oz厚铜板（传统为3oz），载流能力提升200%，…...
USART 串口通信全解析：原理、结构与代码实战
文章目录 USARTUSART简介USART框图USART基本结构数据帧起始位侦测数据采样波特率发生器串口发送数据 主要代码串口接收数据与发送数据主要代码 USART USART简介 一、USART 的全称与基本定义 英文全称 USART：Universal Synchronous Asynchronous Receiver Transmi…...
三维GIS开发cesium智慧地铁教程（4）城市白模加载与样式控制
一、添加3D瓦片 <!-- 核心依赖引入 --> <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"><!-- 模型数据路径 --> u…...
抽奖系统核心——抽奖管理
目录 前端逻辑： 核心全局变量： reloadConf函数： nextStep函数： 后端实现： 抽奖接口: Controller层: Service层: MqReceiver： drawPrizeService： statusConvert()方法: activityStatu…...
【C语言】C语言经典小游戏：贪吃蛇（下）
文章目录 一、游戏前准备二、游戏开始1、游戏开始函数（GameStart）1）打印欢迎界⾯（WelcomeToGame）2）创建地图（CreateMap）3）初始化蛇⾝（InitSnake）4…...
AndroidR车机TextToSpeech音频焦点异常问题分析
一、引言 文章《Android车机之TextToSpeech》介绍了TextToSpeech的使用，当前较多座舱系统语音服务都接入了原生TextToSpeech接口调用。 我司自研语音TTS服务，也接入了此TTS接口调用，对外提供TextToSpeech能力，播报时由客户端Client自行管理音频焦点，播报前申请音频焦点，…...
ArcGIS Maps SDK for JavaScript：使用图层过滤器只显示FeatureLayer的部分要素
文章目录 引言1 需求场景分析2精确过滤实现方案2.1 基础过滤语法2.2 动态过滤实现 3 模糊查询进阶技巧3.1 LIKE操作符使用3.2 特殊字段处理 4. 性能优化与注意事项4.1 服务端vs客户端过滤4.2 最佳实践建议 5 常见问题解答 引言 在地图应用开发中，图层过滤是常见的需…...