HTML流光爱心

文章目录

写在前面

本期博主给大家推荐一个由 HTML 代码实现的、红蓝色线条组成的 流光爱心，一起来看看吧。

完整代码

代码分析

这段代码通过 HTML、CSS 和 WebGL 结合实现了一个“流光爱心”效果，以下是对其的详细分析。

1. HTML 结构

在 HTML 部分，主要是一个 canvas 元素，它是用于绘制心形动画的区域。canvas元素通过其 ID 属性 canvas 在 JavaScript 中被引用，用于初始化 WebGL 上下文。

在这里，宽度和高度只是初始设置，代码通过 JavaScript 调整 canvas 的大小以适应浏览器窗口。

2. CSS 部分

CSS 的作用是设置整个网页的背景颜色为黑色，并使画布占据整个窗口，同时禁用滚动条以确保效果全屏展示。

body {

    background-color: #000;
    margin: 0;
    overflow: hidden;
    background-repeat: no-repeat;
}

3. WebGL 上下文初始化

JavaScript 部分通过 getContext('webgl') 获取 WebGL 绘图上下文，这是一种用于在网页中绘制 2D 和 3D 图形的 API。

var canvas = document.getElementById("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var gl = canvas.getContext('webgl');
if (!gl) {console.error("Unable to initialize WebGL.");
}

这段代码确保 WebGL 能够正常运行，如果无法初始化 WebGL，会在控制台输出错误信息。

4. 着色器程序

代码中定义了顶点着色器和片段着色器，用于处理图形的顶点和颜色计算。顶点着色器 vertexSource 负责定义绘制区域，而片段着色器 fragmentSource 则负责生成心形动画的光效。

attribute vec2 position;
void main() {gl_Position = vec4(position, 0.0, 1.0);
}

vec2 getHeartPosition(float t){return vec2(16.0 * sin(t) * sin(t) * sin(t),
              -(13.0 * cos(t) - 5.0 * cos(2.0*t)
              - 2.0 * cos(3.0*t) - cos(4.0*t)));
}

这个公式是数学中的经典“心形曲线公式”，通过调整时间参数t，可以得到心形轨迹上的点。

5. 动态渲染

在 draw 函数中，程序使用 requestAnimationFrame(draw) 不断调用自己来实现帧动画，逐帧更新 time 变量，使得心形的流光效果随着时间变化而持续运行。

function draw() {
    time += dt;
    gl.uniform1f(timeHandle, time);
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
    requestAnimationFrame(draw);
}

每一帧，WebGL 都会根据当前的时间 time 重新计算心形上每个点的位置，进而生成流光效果。

6. 响应窗口变化

代码监听了窗口大小的变化，使用 onWindowResize 函数动态调整画布的大小，确保动画始终适应窗口尺寸，并且心形保持居中显示。

window.addEventListener('resize', onWindowResize, false);
function onWindowResize() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    gl.viewport(0, 0, canvas.width, canvas.height);
    gl.uniform1f(widthHandle, window.innerWidth);
    gl.uniform1f(heightHandle, window.innerHeight);
}

总结

这段代码通过 WebGL 技术生成了一个心形流光效果。核心部分在于数学公式计算出的心形轨迹和光晕效果，通过着色器来实现。WebGL 的强大之处在于它能直接操控 GPU，生成高效的动画效果。

写在后面

我是一只有趣的兔子，感谢你的喜欢！