❤️创意网页：打造炫酷网页 - 旋转彩虹背景中的星星动画
✨博主：命运之光
🌸专栏：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 …...
[特殊字符] 智能合约中的数据是如何在区块链中保持一致的？
🧠 智能合约中的数据是如何在区块链中保持一致的？ 为什么所有区块链节点都能得出相同结果？合约调用这么复杂，状态真能保持一致吗？本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里…...
条件运算符
C中的三目运算符（也称条件运算符，英文：ternary operator）是一种简洁的条件选择语句，语法如下： 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true，则整个表达式的结果为“表达式1”…...
Robots.txt 文件
什么是robots.txt？ robots.txt 是一个位于网站根目录下的文本文件（如：https://example.com/robots.txt），它用于指导网络爬虫（如搜索引擎的蜘蛛程序）如何抓取该网站的内容。这个文件遵循 Robots…...
Android15默认授权浮窗权限
我们经常有那种需求，客户需要定制的apk集成在ROM中，并且默认授予其【显示在其他应用的上层】权限，也就是我们常说的浮窗权限，那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...
：观察者模式)
JS设计模式(4)：观察者模式
JS设计模式(4):观察者模式 一、引入 在开发中，我们经常会遇到这样的场景：一个对象的状态变化需要自动通知其他对象，比如： 电商平台中，商品库存变化时需要通知所有订阅该商品的用户；新闻网站中࿰…...
面向无人机海岸带生态系统监测的语义分割基准数据集
描述：海岸带生态系统的监测是维护生态平衡和可持续发展的重要任务。语义分割技术在遥感影像中的应用为海岸带生态系统的精准监测提供了有效手段。然而，目前该领域仍面临一个挑战，即缺乏公开的专门面向海岸带生态系统的语义分割基准数据集。受…...
【学习笔记】erase 删除顺序迭代器后迭代器失效的解决方案
目录 使用 erase 返回值继续迭代使用索引进行遍历 我们知道类似 vector 的顺序迭代器被删除后，迭代器会失效，因为顺序迭代器在内存中是连续存储的，元素删除后，后续元素会前移。 但一些场景中，我们又需要在执行删除操作…...
深度学习之模型压缩三驾马车：模型剪枝、模型量化、知识蒸馏
一、引言 在深度学习中，我们训练出的神经网络往往非常庞大（比如像 ResNet、YOLOv8、Vision Transformer），虽然精度很高，但“太重”了，运行起来很慢，占用内存大，不适合部署到手机、摄…...
协议转换利器，profinet转ethercat网关的两大派系，各有千秋
随着工业以太网的发展，其高效、便捷、协议开放、易于冗余等诸多优点，被越来越多的工业现场所采用。西门子SIMATIC S7-1200/1500系列PLC集成有Profinet接口，具有实时性、开放性，使用TCP/IP和IT标准，符合基于工业以太网的…...
ubuntu22.04 安装docker 和docker-compose
首先你要确保没有docker环境或者使用命令删掉docker sudo apt-get remove docker docker-engine docker.io containerd runc安装docker 更新软件环境 sudo apt update sudo apt upgrade下载docker依赖和GPG 密钥 # 依赖 apt-get install ca-certificates curl gnupg lsb-rel…...