【HTML】简单制作一个动态变色光束花

 目录

前言

开始       

HTML部分

效果图

​编辑​编辑​编辑​编辑总结


前言

        无需多言,本文将详细介绍一段代码,具体内容如下:

开始       

        首先新建文件夹,创建一个文本文档,其中HTML的文件名改为[index.html],创建好后右键用文本文档打开,再把下面相对应代码填入后保存即可。

HTML部分

       这段HTML代码定义了一个网页,其中包含一个用于绘图的<canvas>元素和一个使用JavaScript编写的动态视觉效果程序。

  1. HTML结构:

    • <!doctype html>: 声明文档类型为HTML5。
    • <html>: 根元素,包含整个HTML文档。
    • <head>: 包含文档的元数据,如字符集定义(<meta charset="utf-8">)和页面标题(<title>)。
    • <style>: 内联CSS样式,定义了页面的背景颜色、隐藏滚动条以及canvas元素的样式。
    • <body>: 包含页面的可见内容,这里只有一个<canvas>元素。
  2. CSS样式:

    • body设置了黑色背景,并隐藏了滚动条。
    • canvas设置了全屏宽度和高度,绝对定位,并使其宽度和高度根据设备像素比进行缩放。
  3. JavaScript程序:

    • 使用严格模式('use strict';)来提高代码质量。
    • 定义了一个名为Scene的构造函数,用于创建和管理canvas上的视觉场景。
    • Scene构造函数初始化了一些数学常量,如圆周率(PI)和黄金比例(GOLDEN),并设置了canvas的上下文和设备像素比(dpr)。
    • Scenereset方法用于在窗口大小变化时重新设置canvas的尺寸和位置。
    • Sceneloop方法是一个动画循环,它使用requestAnimationFrame来持续更新canvas内容,创建动态视觉效果。
    • 动画中使用了各种数学计算来确定绘制元素的位置、大小和颜色。
    • 通过ctx.save()ctx.restore()来保存和恢复绘图状态,以便在绘制不同元素时保持上下文的独立性。
    • 程序最后创建了一个Scene实例,从而启动了动画效果。
<!doctype html> <!-- 声明文档类型为 HTML5 -->
<html>
<head>
<meta charset="utf-8"> <!-- 设置字符编码为 utf-8,确保页面正确显示多语言内容 -->
<title>made in lky</title> <!-- 页面标题 --><style>
body {background: #000; /* 页面背景颜色设置为黑色 */overflow: hidden; /* 隐藏页面滚动条 */
}canvas {height: 100%; /* 画布高度占满整个浏览器窗口高度 */left: 0;position: absolute; /* 绝对定位,相对于最近的已定位的祖先元素 */top: 0;width: 100%; /* 画布宽度占满整个浏览器窗口宽度 */
}
</style>
</head>
<body>
<canvas></canvas> <!-- 创建一个空的 canvas 元素,用于后续的绘图操作 --><script>
'use strict'; // 启用严格模式,有助于避免代码中的错误// 定义一个名为 Scene 的构造函数,用于创建和管理 canvas 上的场景
function _classCallCheck(instance, Constructor) {if (!(instance instanceof Constructor)) {throw new TypeError("Cannot call a class as a function"); // 如果实例不是构造函数的实例,则抛出错误}
}var Scene = function () {function Scene() {var _this = this; // 将当前实例赋值给 _this 变量,用于在事件监听器中引用当前实例// 定义一些数学常量this.PI = Math.PI;this.TAU = this.PI * 2;this.GOLDEN = (Math.sqrt(5) + 1) / 2;// 获取 canvas 元素并获取其上下文this.canvas = document.querySelector('canvas');this.ctx = this.canvas.getContext('2d');// 获取设备像素比,用于高清屏幕优化this.dpr = window.devicePixelRatio;// 调用 reset 方法初始化场景this.reset();// 监听窗口大小变化事件,并在变化时重新初始化场景window.addEventListener('resize', function () {return _this.reset();});// 调用 loop 方法开始动画循环this.loop();}// 定义 reset 方法,用于初始化场景的一些属性Scene.prototype.reset = function reset() {// 获取并设置画布的宽度和高度this.width = window.innerWidth;this.height = window.innerHeight;// 计算画布的中心点this.hwidth = this.width * 0.5;this.hheight = this.height * 0.5;// 设置 canvas 的实际尺寸,考虑设备像素比this.canvas.width = this.width * this.dpr;this.canvas.height = this.height * this.dpr;// 缩放 canvas 上下文,考虑设备像素比this.ctx.scale(this.dpr, this.dpr);// 将 canvas 上下文的原点移动到画布中心this.ctx.translate(~~this.hwidth, ~~this.hheight);// 设置绘制模式为 'lighter',使得新绘制的内容会与已绘制内容进行叠加this.ctx.globalCompositeOperation = 'lighter';// 设置一个 tick 变量,用于控制动画的进度this.tick = 320;};// 定义 loop 方法,用于执行动画循环Scene.prototype.loop = function loop() {var _this2 = this;// 使用 requestAnimationFrame 方法来循环执行动画requestAnimationFrame(function () {return _this2.loop();});// 递增 tick 变量this.tick++;// 清除画布,为新的绘制做准备this.ctx.clearRect(-this.hwidth, -this.hheight, this.width, this.height);// 定义一些动画参数var count = 150;var angle = this.tick * -0.001;var amp = 0;// 循环绘制动画的每个元素for (var i = 0; i < count; i++) {// 计算元素的位置和大小angle += this.GOLDEN * this.TAU + Math.sin(this.tick * 0.03) * 0.001;amp += (i - count / 2) * 0.01 + Math.cos(this.tick * 0.015) * 1;var x = Math.cos(angle) * amp + Math.cos(this.tick * 0.0075) * (count - i) * 0.3;var y = Math.sin(angle) * amp + Math.sin(this.tick * 0.0075) * (count - i) * 0.3;// 计算绘制的圆的半径和缩放比例var radius = 0.1 + i * 0.02;var scale = 0.1 + amp * 0.1;// 计算 HSLA 颜色值var hue = this.tick + angle / this.TAU * 0.4 + 60;var saturation = 90;var lightness = 60;var alpha = 0.7 + Math.cos(this.tick * 0.03 + i) * 0.3;// 保存当前的绘图状态this.ctx.save();// 移动画布原点到计算出的坐标this.ctx.translate(x, y);// 旋转画布this.ctx.rotate(angle);// 缩放画布this.ctx.scale(scale, 1);// 旋转画布一个额外的角度this.ctx.rotate(this.PI * 0.25);// 设置填充颜色this.ctx.fillStyle = 'hsla(' + hue + ', ' + saturation + '%, ' + lightness + '%, ' + alpha + ')';// 绘制一个填充的矩形this.ctx.fillRect(-radius, -radius, radius * 2, radius * 2);// 恢复之前的绘图状态this.ctx.restore();// 绘制一个圆的边框this.ctx.beginPath();this.ctx.arc(x, y, radius * 12, 0, this.TAU);this.ctx.fillStyle = 'hsla(' + hue + ', ' + saturation + '%, ' + lightness + '%, ' + alpha * 0.05 + ')';this.ctx.fill();}}return Scene;
}();// 创建 Scene 实例并开始动画
var scene = new Scene();
</script></body>
</html>

效果图

总结

        这段HTML代码创建了一个全屏黑色背景的网页,并在其中嵌入了一个<canvas>元素,用于展示一个动态的视觉效果。通过内联的CSS样式,canvas被设置为占据整个视口,且没有滚动条。JavaScript部分定义了一个名为Scene的类,它通过计算数学常量和使用requestAnimationFrame来创建一个循环动画,其中包含了形状、颜色和透明度的变化,从而在canvas上绘制出复杂的动态图案。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/310010.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

比特币突然暴跌

作者&#xff1a;秦晋 周末愉快。 今天给大家分享两则比特币新闻&#xff0c;也是两个数据。一则是因为中东地缘政治升温&#xff0c;传统资本市场的风险情绪蔓延至加密市场&#xff0c;引发加密市场暴跌。比特币跌至66000美元下方。杠杆清算金额高达8.5亿美元。 二则是&#x…

交流电子负载解决方案

交流电子负载是一种可以模拟真实负载的设备&#xff0c;它可以接收交流电源输入&#xff0c;并以一定的电流和电压进行输出。这种设备在电力系统、电子设备研发、生产和质量控制等多个领域都有广泛的应用。以下是一些关于交流电子负载解决方案的建议。 选择合适的设备&#xff…

锁策略总结

锁策略 悲观锁和乐观锁 乐观锁和悲观锁不是具体类型的锁而是指两种不同的对待加锁的态度&#xff0c;这两个锁面对锁冲突的态度是相反的。 乐观锁&#xff1a;认为不存在很多的并发操作&#xff0c;因此不需要加锁。悲观锁&#xff1a;认为存在很多并发操作&#xff0c;因此需…

FPGA - 以太网UDP通信(二)

一&#xff0c;引言 前文链接&#xff1a;FPGA - 以太网UDP通信&#xff08;一&#xff09; 在上文章中介绍了以太网简介&#xff0c;以太网UDP通信硬件结构&#xff0c;以及PHY芯片RGMII接口-GMII接口转换逻辑&#xff0c;接下来介绍UDP通信结构框图以及数据链路层&#xff…

【详细讲解下Photoshop】

&#x1f3a5;博主&#xff1a;程序员不想YY啊 &#x1f4ab;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f917;点赞&#x1f388;收藏⭐再看&#x1f4ab;养成习惯 ✨希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出…

MySQL练习题

有三个表&#xff0c;表S&#xff08;学生表&#xff09;&#xff0c;C&#xff08;课程表&#xff09;&#xff0c;SSC&#xff08;学生选课表&#xff09; S&#xff08;SNO&#xff0c;SNAME&#xff09;代表&#xff08;学号&#xff0c;姓名&#xff09; C&#xf…

[MySQL]数据库原理8——喵喵期末不挂科

希望你开心&#xff0c;希望你健康&#xff0c;希望你幸福&#xff0c;希望你点赞&#xff01; 最后的最后&#xff0c;关注喵&#xff0c;关注喵&#xff0c;关注喵&#xff0c;大大会看到更多有趣的博客哦&#xff01;&#xff01;&#xff01; 喵喵喵&#xff0c;你对我真的…

NVM的安装与配置

目录 一、简介二、下载2.1、windows环境下载地址2.2、安装 三、配置3.1、查看可安装版本3.2、安装版本3.3、使用和切换版本3.4、模块配置 四、其他4.1、全局安装pnpm4.2、常用nvm命令 一、简介 NVM&#xff0c;全称为Node Version Manager&#xff0c;是一个流行的命令行工具&a…

k8s控制器(五)_____DaemonSet

DaemonSet控制器 DaemonSet控制器是Kubernetes中的一种控制器&#xff0c;用于确保集群中的每个节点都运行一个Pod的副本。它通常用于在整个集群中部署一些系统级别的服务&#xff1a; 在每一个node节点运行一个存储服务&#xff0c;例如gluster&#xff0c;ceph。在每一个no…

模型预测控制MPC(2)—— 无约束线性MPC

前文&#xff1a;模型预测控制MPC&#xff08;1&#xff09;—— 基础概念参考&#xff1a;模型预测控制&#xff08;2022春&#xff09;本文从偏控制的角度介绍无约束线性MPC方法&#xff0c; x , u , J x,u,J x,u,J 分别代表状态、动作和代价函数 文章目录 1. 问题定义1.1 多…

P2P通信基本原理

在数字世界的脉络中&#xff0c;点对点&#xff08;P2P&#xff09;技术如同一条悄无声息的河流&#xff0c;流经信息的每个角落&#xff0c;连接着世界各地的计算机和设备。这种去中心化的网络模型&#xff0c;不仅打破了传统的客户端-服务器架构的界限&#xff0c;还赋予了数…

DC-5渗透测试复现

DC-5渗透测试复现 目的&#xff1a; 获取最高权限以及5个flag 过程&#xff1a; 信息打点-文件包含漏洞-弹shell- scren-4.0.5提权 环境&#xff1a; 攻击机&#xff1a;kali(192.168.85.136) 靶机&#xff1a;DC_3(192.168.85.134) 复现&#xff1a; 一.信息收集 nma…

DC-2渗透测试复现

DC-2渗透测试复现 目的&#xff1a; 获取最高权限以及5个flag 过程&#xff1a; 信息打点-ssh连接-git提权 环境&#xff1a; 攻击机&#xff1a;kali(192.168.85.136) 靶机&#xff1a;DC_2(192.168.85.132) 复现&#xff1a; 一.信息收集 nmap -sP 192.168.85.0/24 …

element问题总结之el-table使用fixed固定列后滚动条滑动到底部或者最右侧的时候错位问题

el-table使用fixed固定列后滚动条滑动到底部或者最右侧的时候错位 效果图前言解决方案纵向滑动滚动条滑动到底部的错位解决横向滚动条滑动到最右侧的错位解决 效果图 前言 在使用el-table固定行的时候移动滚动条会发现移动到底部或者移动到最右侧的时候会出现表头和内容错位或…

头歌-机器学习 第9次实验 随机森林

第1关&#xff1a;Bagging 任务描述 本关任务&#xff1a;补充 python 代码&#xff0c;完成 BaggingClassifier 类中的 fit 和 predict 函数。请不要修改 Begin-End 段之外的代码。 相关知识 为了完成本关任务&#xff0c;你需要掌握&#xff1a; 什么是 Bagging&#xf…

Day37:LeedCode 738.单调递增的数字 968.监控二叉树 蓝桥杯 翻转

738. 单调递增的数字 当且仅当每个相邻位数上的数字 x 和 y 满足 x < y 时&#xff0c;我们称这个整数是单调递增的。 给定一个整数 n &#xff0c;返回 小于或等于 n 的最大数字&#xff0c;且数字呈 单调递增 。 示例 1: 输入: n 10 输出: 9 思路: 假设这个数是98,…

Nginx健康检查

Nginx健康检查nginx_upstream_check_module nginx健康检查介绍: ​ 主动健康检查&#xff0c;nignx定时主动地去ping后端的服务列表&#xff0c;当发现某服务出现异常时&#xff0c;把该服务从健康列表中移除&#xff0c;当发现某服务恢复时&#xff0c;又能够将该服务加回健…

Offer必备算法26_BFS解决最短路_四道力扣题(由易到难)

目录 ①力扣1926. 迷宫中离入口最近的出口 解析代码 ②力扣433. 最小基因变化 解析代码 ③力扣127. 单词接龙 解析代码 ④力扣675. 为高尔夫比赛砍树 解析代码 本篇完。 ①力扣1926. 迷宫中离入口最近的出口 1926. 迷宫中离入口最近的出口 难度 中等 给你一个 m x …

【简明图文教程】Node.js的下载、安装、环境配置及测试

文章目录 前言下载Node.js安装Node.js配置Node.js配置环境变量测试后言 前言 本教程适用于小白第一次从零开始进行Node.js的下载、安装、环境配置及测试。 如果你之前已经安装过了Node.js或删除掉了Node.js想重新安装&#xff0c;需要先参考以下博客进行处理后&#xff0c;再根…

社交网络与Web3:数字社交的下一阶段

随着信息技术的飞速发展&#xff0c;人们的社交方式也发生了巨大的变化。从最初的互联网聊天室到如今的社交网络平台&#xff0c;我们已经见证了数字社交的不断演变和发展。而随着区块链技术的兴起&#xff0c;Web3时代的到来将为数字社交带来全新的可能性和挑战。本文将探讨社…