❤️创意网页：打造炫酷网页 - 旋转彩虹背景中的星星动画
✨博主：命运之光
🌸专栏：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 …...
redis总结
1.redis redis高性能的key-value数据库，支持持久化，不仅仅支持简单的key-value，还提供了list，set，zset，hash等数据结构的存储，支持数据的备份（master-slave模式） redis&…...
现代C++中的从头开始深度学习：激活函数
一、说明 让我们通过在C中实现激活函数来获得乐趣。人工神经网络是生物启发模型的一个例子。在人工神经网络中，称为神经元的处理单元被分组在计算层中，通常用于执行模式识别任务。 在这个模型中，我们通常更喜欢控制每一层的输出以服从一些约束…...
python怎么实现tcp和udp连接
目录 什么是tcp连接 什么是udp连接 python怎么实现tcp和udp连接 什么是tcp连接 TCP（Transmission Control Protocol）连接是一种网络连接，它提供了可靠的、面向连接的数据传输服务。 在TCP连接中，通信的两端（客户端和…...
java设计模式-观察者模式(jdk内置)
上一篇我们学习了 观察者模式。 观察者和被观察者接口都是我们自己定义的，整个设计模式我们从无到有都是自己设计的，其实，java已经内置了这个设计模式，我们只需要定义实现类即可。 下面我们不多说明，直接示例代码&am…...
秒级体验本地调试远程 k8s 中的服务
点击上方蓝色字体，选择“设为星标” 回复”云原生“获取基础架构实践 背景 在这个以k8s为云os的时代，程序员在日常的开发过程中，肯定会遇到各种问题，比如：本地开发完，需要部署到远程k8s集群，本地…...
CV前沿方向：Visual Prompting 视觉提示工程下的范式
prompt在视觉领域，也越来越重要，在图像生成，作为一种可控条件，增进交互和可控性，在多模态理解方面，指令prompt也使得任务灵活通用。视觉提示工程，已然成为CV一个前沿方向！ 下面来看看…...
Redis五大基础类型解析
1.String类型 特征：即存储字符串的类型，单个字符串存储量最大不超过512MB 常用业务场景：⽤来存储JSON序列化之后对象 底层编码： int编码 数据结构特点：ptr指针直接指向字符串常量池中对应字符串地址，而…...
在CSDN学Golang云原生（服务网格istio）
一，在Kubernetes上部署istio 在Kubernetes上部署istio，可以按照以下步骤进行： 安装Istio 使用以下命令从Istio官网下载最新版本的Istio： curl -L https://istio.io/downloadIstio | ISTIO_VERSION<VERSION> sh - 其中&…...
Golang 获取本地 IP 地址方法
在 Golang 中，使用 net 包可以很方便地获取到本机IP地址。 借助 net.InterfaceAddrs 方法 简单示例代码如下： package mainimport ("fmt""net" )func main() {addrList, err : net.InterfaceAddrs()if err ! nil {panic(err)}for…...
抖音seo短视频账号矩阵系统技术开发简述
说明：本开发文档适用于抖音seo源码开发，抖音矩阵系统开发，短视频seo源码开发，短视频矩阵系统源码开发 一、 抖音seo短视频矩阵系统开发包括 抖音seo短视频账号矩阵系统的技术开发主要包括以下几个方面： 1.前端界面设…...
做网站好看的旅行背景图片/如何做网络销售平台
导语 根据千瓜数据显示，电影上线以来，铃芽之旅这个IP也在小红书平台发生了惊人的增长。累计话题浏览量超1.23亿，笔记预估阅读总数近五千万。攀升的数字背后，是属于年轻一代的狂欢！ 果集千瓜数据 铃芽之旅在小红书平台…...
wordpress主题需要ftp/制作公司网站的步骤
weblogic8.1 5 ip 限制 报错信息如图所示： 解决办法：此weblogic 未破解，去网上下载破解包，然后放到 copy weblogic_sp.jar to $WL_HOME/server/lib/ copy license.bea to $BEA_HOME 此目录下即可。 本人资源里面有 weblogic 8.…...
网站的营销与推广/网站收录查询工具
bitsCN.comMySQL提供标准的SQL模式匹配，以及一种基于象Unix实用程序如vi、grep和sed的扩展正则表达式模式匹配的格式。SQL的模式匹配允许你使用“_”匹配任何单个字符，而“%”匹配任意数目字符(包括零个字符)。在 MySQL中，SQL的模式缺省是忽略…...
程序开发需要学什么/seo培训机构
https://blog.csdn.net/lizhihua0925/article/details/52595813blog.csdn.net最近在研究Docker，正好也想学习一下Laravel，但每次laravel的部署很麻烦，所以正在研究了一下，做一下Docker镜像，感觉棒棒的~~~Dockerfilel…...
安康市滴滴公司电话/快速排名优化推广价格
游戏服务器高可用负载均衡 内容精选换一换共享型负载均衡不支持，必须是华为云后端服务器。点击了解更多后端服务器介绍相关内容。独享型负载均衡实例支持混合负载均衡的能力，后端服务器组不仅支持添加云上VPC内的服务器，还支持添加其他VPC、其…...
罗湖做网站哪家好/网站注册账号
1. 点击按钮： Click Buttonindex_or_name Click button 实例：Click Button index0 作者通过实验发现在安卓手机应用测试中，name这个属性不起作用，所以建议还是使用index属性。 2.输入内容： Input Textlocator, text Ty…...