【HTML】简单制作一个分形动画

2024-04-10 12:44
文章标签 简单 html 制作 frontend 动画 分形

本文主要是介绍【HTML】简单制作一个分形动画，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

  目录

前言

开始       

HTML部分

效果图

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

前言

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

开始       

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

HTML部分

       这段HTML代码创建了一个动画线分形艺术作品，其核心特点和功能可以总结如下：

  1. 视觉风格：页面背景设置为黑色，提供了一个适合展示分形图形的暗色背景。分形的线条颜色从蓝色渐变到紫色，增加了视觉效果的丰富性。

  2. Canvas 绘图：使用<canvas>元素作为绘图区域，通过JavaScript中的2D上下文来绘制分形图形。

  3. 分形逻辑：定义了一个Shape构造函数来创建分形形状，每个形状由一系列的线段组成，并且每个形状可以递归地生成更小的子形状，以达到分形效果。

  4. 动画效果：通过animate函数实现动画效果，该函数会在每一帧更新分形图形的位置和大小，并递归生成新的形状。动画的持续时间和速度都是可配置的。

  5. 颜色变化：随着动画的进行，分形线条的颜色会逐渐变化，从一种颜色过渡到另一种颜色，增加了动态视觉效果。

  6. 响应式设计：代码中包含了事件监听器，使得当浏览器窗口大小改变时，canvas元素的尺寸也会相应地调整，确保分形图形能够适应不同的屏幕尺寸。

  7. 性能优化：为了避免在每一帧都清除整个画布，代码使用了globalCompositeOperation属性设置为"lighter"，这样新绘制的形状会与画布上已有的内容进行叠加，从而提高了动画的性能。

整体而言，这段代码展示了如何在网页上使用HTML5的canvas元素和JavaScript来创建一个动态、响应式的分形艺术作品。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>动画线分形</title><style>
body {background-color:black; /* 设置背景颜色为黑色 */margin:0; /* 移除默认边距 */overflow:hidden; /* 隐藏滚动条 */
}
</style>
</head>
<body><canvas id="canvas"></canvas> <!-- 定义一个canvas元素用于绘制内容 --><script>
// 定义黄金比例的常量
const PHI = (1 + Math.sqrt(5)) / 2; // 1.618033988749895
// 根据浏览器调整生成的分形深度
const maxGeneration = (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) ? 5 : 6,
// 每帧的持续时间
frameDuration = 1000 / 60,
// 动画总时长
duration = 3000,
// 旋转速度
rotationSpeed = 0.3,
// 动画总帧数
totalIterations = Math.floor(duration / frameDuration),
// 最大基础尺寸
maxBaseSize = 100,
// 基础尺寸变化速度
baseSizeSpeed = 0.02;// 获取canvas元素及其上下文
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d"),
// 获取当前视口的宽度和高度
canvasWidth = document.documentElement.clientWidth,
canvasHeight = document.documentElement.clientHeight,
// 定义一个数组用于存储分形形状
shapes = [],
// 定义尺寸变化
sizeVariation,
// 当前迭代次数
iteration = 0,
// 动画方向
animationDirection = 1,
// 尺寸变化范围
sizeVariationRange = .15,
// 基础旋转角度
baseRotation = 0,
// 基础尺寸
baseSize = 50,
// 定义颜色变化的初始值
c1 = 43,
c1S = 1,
c2 = 205,
c2S = 1,
c3 = 255,
c3S = 1;// 设置canvas元素的尺寸以匹配视口大小
canvas.setAttribute("width", canvasWidth);
canvas.setAttribute("height", canvasHeight);// 定义Shape构造函数，用于创建分形形状
function Shape(gen, x, y, size, rotation) {this.generation = gen;this.size = size;this.rotation = -rotation;this.start = {x: x,y: y};// 计算形状的三个端点坐标this.end = {x_1: this.start.x + Math.cos(degToRad(this.rotation)) * this.size,y_1: this.start.y + Math.sin(degToRad(this.rotation)) * this.size,x_2: this.start.x + Math.cos(degToRad(this.rotation + 360 / 3)) * this.size,y_2: this.start.y + Math.sin(degToRad(this.rotation + 360 / 3)) * this.size,x_3:this.start.x +Math.cos(degToRad(this.rotation + 360 / 3 * 2)) * this.size,y_3:this.start.y + Math.sin(degToRad(this.rotation + 360 / 3 * 2)) * this.size};// 初始化形状，生成子形状this.init();
}// Shape的初始化方法
Shape.prototype.init = function() {if (this.generation < maxGeneration) {var gen = this.generation + 1,newSize = this.size * sizeVariation,newRotation = this.rotation;// 递归创建子形状shapes.push(new Shape(gen, this.end.x_1, this.end.y_1, newSize, newRotation));shapes.push(new Shape(gen, this.end.x_2, this.end.y_2, newSize, newRotation));shapes.push(new Shape(gen, this.end.x_3, this.end.y_3, newSize, newRotation));}// 绘制当前形状this.draw();
};// 绘制形状的方法
Shape.prototype.draw = function() {ctx.beginPath();ctx.moveTo(this.start.x, this.start.y);// 绘制三条线段ctx.lineTo(this.end.x_1, this.end.y_1);ctx.moveTo(this.start.x, this.start.y);ctx.lineTo(this.end.x_2, this.end.y_2);ctx.moveTo(this.start.x, this.start.y);ctx.lineTo(this.end.x_3, this.end.y_3);// 设置线条颜色，透明度随迭代次数增加而降低ctx.strokeStyle ="rgba(" + c1 + "," + c2 + "," + c3 + "," + 1 / this.generation / 5 + ")";ctx.stroke();// 填充颜色（此处被注释掉）//ctx.fill();
};// 动画函数，用于更新和绘制分形
function animate() {// 清除画布（此处被注释掉，因为我们使用其他方法实现透明效果）//ctx.clearRect(0, 0, canvasWidth, canvasHeight);// 设置合成操作为源覆盖，以实现透明效果ctx.globalCompositeOperation = "source-over";// 用半透明的黑色填充背景，创建透明效果ctx.fillStyle = "rgba(0,0,0,.1)";ctx.fillRect(0, 0, canvasWidth, canvasHeight);// 恢复合成操作为lighter，用于绘制新形状ctx.globalCompositeOperation = "lighter";// 清空形状数组shapes = [];// 创建一个新的分形形状shapes.push(new Shape(0, canvasWidth / 2, canvasHeight / 2, baseSize, baseRotation));// 改变颜色changeColor();// 增加迭代次数iteration++;// 调整基础尺寸if (baseSize < maxBaseSize) baseSize += baseSizeSpeed;// 更新基础旋转角度baseRotation += rotationSpeed;// 调整尺寸变化sizeVariation = easeInOutSine(iteration,1 - sizeVariationRange * animationDirection,sizeVariationRange * 2 * animationDirection,totalIterations);// 如果迭代次数达到总帧数，则重置迭代次数并反转动画方向if (iteration >= totalIterations) {iteration = 0;animationDirection *= -1;}// 请求下一帧动画requestAnimationFrame(animate);
}// 度转弧度函数
function degToRad(deg) {return Math.PI / 180 * deg;
}// 缓动函数，用于在动画中平滑变化尺寸
function easeInOutSine(currentIteration,startValue,changeInValue,totalIterations
) {return (changeInValue /2 *(1 - Math.cos(Math.PI * currentIteration / totalIterations)) +startValue);
}// 改变颜色的函数
function changeColor() {if (c1 == 0 || c1 == 255) c1S *= -1;if (c2 == 0 || c2 == 255) c2S *= -1;if (c3 == 0 || c3 == 255) c3S *= -1;c1 += 1 * c1S;c2 += 1 * c2S;c3 += 1 * c3S;
}// 初始化canvas的合成操作和线条颜色
ctx.globalCompositeOperation = "lighter";
animate();// 监听窗口大小变化事件，调整canvas尺寸
window.addEventListener("resize", function() {canvasWidth = document.documentElement.clientWidth;canvasHeight = document.documentElement.clientHeight;// 重新设置canvas元素的尺寸canvas.setAttribute("width", canvasWidth);canvas.setAttribute("height", canvasHeight);// 设置线条颜色ctx.strokeStyle = "rgba(66,134,240,.3)";// 保持合成操作为lighterctx.globalCompositeOperation = "lighter";
});
</script></body>
</html>

效果图

总结

        这段HTML代码实现了一个动态的分形艺术动画，它在网页上展示了一个基于数学分形原理的视觉图案。页面背景设置为黑色，以突出显示绘制在<canvas>元素上的分形图形。这些图形通过递归的方式生成，每个基本形状会根据预设的参数产生更小的副本，从而形成复杂的分形结构。

        动画的核心是通过JavaScript编写的，其中定义了一个Shape类，负责创建和绘制单个分形形状。每个Shape对象包含生成的代数、大小、旋转角度和端点坐标。在初始化过程中，如果当前形状的代数小于最大代数限制，它将生成三个新的子形状，这些子形状的大小会根据一个变化范围进行调整，从而产生分形的递归效果。

        动画的绘制是通过animate函数实现的，该函数会在每一帧更新所有形状的位置和大小，并根据需要递归生成新的形状。动画使用了requestAnimationFrame来平滑地进行，确保了流畅的视觉效果。为了增加视觉效果，动画中的形状颜色会随时间变化，从蓝色过渡到紫色，并在每次迭代中调整透明度，以产生深度感。

        此外，代码还考虑了不同设备的屏幕尺寸，通过监听窗口大小变化事件来动态调整<canvas>元素的尺寸，确保动画在不同设备上都能正确显示。为了提高性能，动画在绘制新形状时不会清除整个画布，而是使用"lighter"合成操作模式，让新绘制的形状与画布上已有的内容叠加，从而减少了不必要的重绘操作。

        简单来说就是通过结合HTML5的<canvas>元素和JavaScript编程，创造了一个视觉上吸引人、响应式且性能优化的分形动画作品。

这篇关于【HTML】简单制作一个分形动画的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/891103。

相关文章

部署Vue项目到服务器后404错误的原因及解决方案

部署Vue项目到服务器后404错误的原因及解决方案

《部署Vue项目到服务器后404错误的原因及解决方案》文章介绍了Vue项目部署步骤以及404错误的解决方案,部署步骤包括构建项目、上传文件、配置Web服务器、重启Nginx和访问域名,404错误通常是... 目录一、vue项目部署步骤二、404错误原因及解决方案错误场景原因分析解决方案一、Vue项目部署步骤
阅读更多...
C++初始化数组的几种常见方法(简单易懂)

C++初始化数组的几种常见方法(简单易懂)

《C++初始化数组的几种常见方法(简单易懂)》本文介绍了C++中数组的初始化方法,包括一维数组和二维数组的初始化,以及用new动态初始化数组,在C++11及以上版本中,还提供了使用std::array... 目录1、初始化一维数组1.1、使用列表初始化（推荐方式）1.2、初始化部分列表1.3、使用std::
阅读更多...
前端原生js实现拖拽排课效果实例

前端原生js实现拖拽排课效果实例

《前端原生js实现拖拽排课效果实例》：本文主要介绍如何实现一个简单的课程表拖拽功能,通过HTML、CSS和JavaScript的配合,我们实现了课程项的拖拽、放置和显示功能,文中通过实例代码介绍的... 目录1. 效果展示2. 效果分析2.1 关键点2.2 实现方法3. 代码实现3.1 html部分3.2
阅读更多...
redis群集简单部署过程

redis群集简单部署过程

《redis群集简单部署过程》文章介绍了Redis,一个高性能的键值存储系统,其支持多种数据结构和命令,它还讨论了Redis的服务器端架构、数据存储和获取、协议和命令、高可用性方案、缓存机制以及监控和... 目录Redis介绍1. 基本概念2. 服务器端3. 存储和获取数据4. 协议和命令5. 高可用性6.
阅读更多...
CSS弹性布局常用设置方式

CSS弹性布局常用设置方式

《CSS弹性布局常用设置方式》文章总结了CSS布局与样式的常用属性和技巧,包括视口单位、弹性盒子布局、浮动元素、背景和边框样式、文本和阴影效果、溢出隐藏、定位以及背景渐变等,通过这些技巧,可以实现复杂... 一、单位元素vm 1vm 为视口的1%vh 视口高的1%vmin 参照长边vmax 参照长边re
阅读更多...
CSS3中使用flex和grid实现等高元素布局的示例代码

CSS3中使用flex和grid实现等高元素布局的示例代码

《CSS3中使用flex和grid实现等高元素布局的示例代码》：本文主要介绍了使用CSS3中的Flexbox和Grid布局实现等高元素布局的方法，通过简单的两列实现、每行放置3列以及全部代码的展示，展示了这两种布局方式的实现细节和效果，详细内容请阅读本文，希望能对你有所帮助... 过往的实现方法是使用浮动加
阅读更多...
css渐变色背景|＜gradient示例详解

css渐变色背景|＜gradient示例详解

《css渐变色背景|＜gradient示例详解》CSS渐变是一种从一种颜色平滑过渡到另一种颜色的效果,可以作为元素的背景,它包括线性渐变、径向渐变和锥形渐变，本文介绍css渐变色背景|＜gradien... 使用渐变色作为背景可以直接将渐China编程变色用作元素的背景，可以看做是一种特殊的背景图片。（是作为背
阅读更多...
JAVA调用Deepseek的api完成基本对话简单代码示例

JAVA调用Deepseek的api完成基本对话简单代码示例

《JAVA调用Deepseek的api完成基本对话简单代码示例》：本文主要介绍JAVA调用Deepseek的api完成基本对话的相关资料,文中详细讲解了如何获取DeepSeekAPI密钥、添加H... 获取API密钥首先，从DeepSeek平台获取API密钥，用于身份验证。添加HTTP客户端依赖使用Jav
阅读更多...
CSS自定义浏览器滚动条样式完整代码

CSS自定义浏览器滚动条样式完整代码

《CSS自定义浏览器滚动条样式完整代码》：本文主要介绍了如何使用CSS自定义浏览器滚动条的样式，包括隐藏滚动条的角落、设置滚动条的基本样式、轨道样式和滑块样式，并提供了完整的CSS代码示例，通过这些技巧，你可以为你的网站添加个性化的滚动条样式，从而提升用户体验，详细内容请阅读本文，希望能对你有所帮助...
阅读更多...
css实现图片旋转功能

css实现图片旋转功能

《css实现图片旋转功能》：本文主要介绍了四种CSS变换效果：图片旋转90度、水平翻转、垂直翻转，并附带了相应的代码示例，详细内容请阅读本文，希望能对你有所帮助... 一 css实现图片旋转90度.icon{ -moz-transform:rotate(-90deg); -webkit-transfo
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2