代码示例
HTML
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>I love you</title>
</head>
<body> <canvas id="canvas"></canvas>
<style type="text/css">
body {
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
var texts = 'I LOVE U'.split('');
var fontSize = 16;
var columns = canvas.width / fontSize;
// 用于计算输出文字时坐标，所以长度即为列数
var drops = [];
//初始值
for (var x = 0; x < columns; x++) {
drops[x] = 1;
}
function draw() {
//让背景逐渐由透明到不透明
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
//文字颜色
ctx.fillStyle = '#f584b7';
ctx.font = fontSize + 'px arial';
//逐行输出文字
for (var i = 0; i < drops.length; i++) {
var text = texts[Math.floor(Math.random() * texts.length)];
ctx.fillText(text, i * fontSize, drops[i] * fontSize);
if (drops[i] * fontSize > canvas.height || Math.random() > 0.95) {
drops[i] = 0;
}
drops[i]++;
}
}
setInterval(draw, 33);
</script>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> love</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<meta charset="UTF-8">
<style>
html,
body {
height: 100%;
padding: 0;
margin: 0;
background: rgb(0, 0, 0);
}
canvas {
position: absolute;
width: 100%;
height: 100%;
}
#child {
position: fixed;
top: 50%;
left: 50%;
margin-top: -75px;
margin-left: -100px;
}
h4 {
font-family: "STKaiti";
font-size: 40px;
color: #f584b7;
position: relative;
top: -70px;
left: -65px;
}
</style>
</head>
<body>
<div id="child">
<h4>💗永远喜欢小鱼💗</h4>
</div>
<!--这里写名字❤！！！-->
<canvas id="pinkboard"></canvas>
<!-- <canvas id= "canvas"></canvas> -->
<script>
/*
* Settings
*/
var settings = {
particles: {
length: 500, // maximum amount of particles
duration: 2, // particle duration in sec
velocity: 100, // particle velocity in pixels/sec
effect: -0.75, // play with this for a nice effect
size: 30, // particle size in pixels
},
};
/*
* RequestAnimationFrame polyfill by Erik Möller
*/
(function () { var b = 0; var c = ["ms", "moz", "webkit", "o"]; for (var a = 0; a < c.length && !window.requestAnimationFrame; ++a) { window.requestAnimationFrame = window[c[a] + "RequestAnimationFrame"]; window.cancelAnimationFrame = window[c[a] + "CancelAnimationFrame"] || window[c[a] + "CancelRequestAnimationFrame"] } if (!window.requestAnimationFrame) { window.requestAnimationFrame = function (h, e) { var d = new Date().getTime(); var f = Math.max(0, 16 - (d - b)); var g = window.setTimeout(function () { h(d + f) }, f); b = d + f; return g } } if (!window.cancelAnimationFrame) { window.cancelAnimationFrame = function (d) { clearTimeout(d) } } }());
/*
* Point class
*/
var Point = (function () {
function Point(x, y) {
this.x = (typeof x !== 'undefined') ? x : 0;
this.y = (typeof y !== 'undefined') ? y : 0;
}
Point.prototype.clone = function () {
return new Point(this.x, this.y);
};
Point.prototype.length = function (length) {
if (typeof length == 'undefined')
return Math.sqrt(this.x * this.x + this.y * this.y);
this.normalize();
this.x *= length;
this.y *= length;
return this;
};
Point.prototype.normalize = function () {
var length = this.length();
this.x /= length;
this.y /= length;
return this;
};
return Point;
})();
/*
* Particle class
*/
var Particle = (function () {
function Particle() {
this.position = new Point();
this.velocity = new Point();
this.acceleration = new Point();
this.age = 0;
}
Particle.prototype.initialize = function (x, y, dx, dy) {
this.position.x = x;
this.position.y = y;
this.velocity.x = dx;
this.velocity.y = dy;
this.acceleration.x = dx * settings.particles.effect;
this.acceleration.y = dy * settings.particles.effect;
this.age = 0;
};
Particle.prototype.update = function (deltaTime) {
this.position.x += this.velocity.x * deltaTime;
this.position.y += this.velocity.y * deltaTime;
this.velocity.x += this.acceleration.x * deltaTime;
this.velocity.y += this.acceleration.y * deltaTime;
this.age += deltaTime;
};
Particle.prototype.draw = function (context, image) {
function ease(t) {
return (--t) * t * t + 1;
}
var size = image.width * ease(this.age / settings.particles.duration);
context.globalAlpha = 1 - this.age / settings.particles.duration;
context.drawImage(image, this.position.x - size / 2, this.position.y - size / 2, size, size);
};
return Particle;
})();
/*
* ParticlePool class
*/
var ParticlePool = (function () {
var particles,
firstActive = 0,
firstFree = 0,
duration = settings.particles.duration;
function ParticlePool(length) {
// create and populate particle pool
particles = new Array(length);
for (var i = 0; i < particles.length; i++)
particles[i] = new Particle();
}
ParticlePool.prototype.add = function (x, y, dx, dy) {
particles[firstFree].initialize(x, y, dx, dy);
// handle circular queue
firstFree++;
if (firstFree == particles.length) firstFree = 0;
if (firstActive == firstFree) firstActive++;
if (firstActive == particles.length) firstActive = 0;
};
ParticlePool.prototype.update = function (deltaTime) {
var i;
// update active particles
if (firstActive < firstFree) {
for (i = firstActive; i < firstFree; i++)
particles[i].update(deltaTime);
}
if (firstFree < firstActive) {
for (i = firstActive; i < particles.length; i++)
particles[i].update(deltaTime);
for (i = 0; i < firstFree; i++)
particles[i].update(deltaTime);
}
// remove inactive particles
while (particles[firstActive].age >= duration && firstActive != firstFree) {
firstActive++;
if (firstActive == particles.length) firstActive = 0;
}
};
ParticlePool.prototype.draw = function (context, image) {
// draw active particles
if (firstActive < firstFree) {
for (i = firstActive; i < firstFree; i++)
particles[i].draw(context, image);
}
if (firstFree < firstActive) {
for (i = firstActive; i < particles.length; i++)
particles[i].draw(context, image);
for (i = 0; i < firstFree; i++)
particles[i].draw(context, image);
}
};
return ParticlePool;
})();
/*
* Putting it all together
*/
(function (canvas) {
var context = canvas.getContext('2d'),
particles = new ParticlePool(settings.particles.length),
particleRate = settings.particles.length / settings.particles.duration, // particles/sec
time;
// get point on heart with -PI <= t <= PI
function pointOnHeart(t) {
return new Point(
160 * Math.pow(Math.sin(t), 3),
130 * Math.cos(t) - 50 * Math.cos(2 * t) - 20 * Math.cos(3 * t) - 10 * Math.cos(4 * t) + 25
);
}
// creating the particle image using a dummy canvas
var image = (function () {
var canvas = document.createElement('canvas'),
context = canvas.getContext('2d');
canvas.width = settings.particles.size;
canvas.height = settings.particles.size;
// helper function to create the path
function to(t) {
var point = pointOnHeart(t);
point.x = settings.particles.size / 2 + point.x * settings.particles.size / 350;
point.y = settings.particles.size / 2 - point.y * settings.particles.size / 350;
return point;
}
// create the path
context.beginPath();
var t = -Math.PI;
var point = to(t);
context.moveTo(point.x, point.y);
while (t < Math.PI) {
t += 0.01; // baby steps!
point = to(t);
context.lineTo(point.x, point.y);
}
context.closePath();
// create the fill
context.fillStyle = '#ea80b0';
context.fill();
// create the image
var image = new Image();
image.src = canvas.toDataURL();
return image;
})();
// render that thing!
function render() {
// next animation frame
requestAnimationFrame(render);
// update time
var newTime = new Date().getTime() / 1000,
deltaTime = newTime - (time || newTime);
time = newTime;
// clear canvas
context.clearRect(0, 0, canvas.width, canvas.height);
// create new particles
var amount = particleRate * deltaTime;
for (var i = 0; i < amount; i++) {
var pos = pointOnHeart(Math.PI - 2 * Math.PI * Math.random());
var dir = pos.clone().length(settings.particles.velocity);
particles.add(canvas.width / 2 + pos.x, canvas.height / 2 - pos.y, dir.x, -dir.y);
}
// update and draw particles
particles.update(deltaTime);
particles.draw(context, image);
}
// handle (re-)sizing of the canvas
function onResize() {
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
}
window.onresize = onResize;
// delay rendering bootstrap
setTimeout(function () {
onResize();
render();
}, 10);
})(document.getElementById('pinkboard'));
</script>
</BODY>
<!--
<audio controls>
<source src="Alan Walker-Faded.mp3" type="audio/ogg">
<source src="Alan Walker-Faded.mp3" type="audio/mpeg">
</audio >
-->
</HTML>代码分析
这是一个融合了两种视觉特效的浪漫主题网页，核心功能是展示爱心粒子动画 +"代码雨" 特效，搭配专属文字祝福，整体风格温馨且富有动态感，以下是详细分析：
一、核心功能与整体结构
网页由两个独立但共存的视觉模块组成，叠加呈现效果：
- 底层：粉色爱心粒子飘散动画（核心视觉焦点）
- 中层："I LOVE U" 代码雨特效（类似黑客帝国数字流）
- 顶层：固定显示的文字祝福 "💗永远喜欢小鱼💗"整体背景为黑色，粉色系元素作为主色调，突出浪漫氛围。
二、代码结构拆解
网页包含两套完整的 HTML+CSS+JS 逻辑，通过标签嵌套共存，结构清晰：
1. 第一部分："I LOVE U" 代码雨特效
-
HTML 结构 ：仅一个
<canvas id="canvas">标签，用于绘制代码雨动画。 -
CSS 样式：设置 body 无边距、溢出隐藏，确保 canvas 全屏覆盖。
-
JS 核心逻辑：
-
初始化 canvas 尺寸为屏幕宽高，适配全屏显示。
-
定义文字数组
texts = 'I LOVE U'.split('')，仅包含英文表白文字。 -
计算列数：按字体大小（16px）分割屏幕宽度，确定代码雨的列数。
-
动画函数
draw()：- 每次绘制时用半透明黑色背景（
rgba(0,0,0,0.05)）覆盖画布，形成文字 "下落" 的拖影效果。 - 随机从文字数组中取字符，按列从上到下绘制，颜色为粉色（
#f584b7）。 - 当文字超出屏幕底部或随机概率触发时，重置该列文字起始位置，实现循环下落。
- 每次绘制时用半透明黑色背景（
-
用
setInterval(draw, 33)控制动画帧率（约 30 帧 / 秒），保证流畅度。
-
2. 第二部分：粉色爱心粒子动画（核心模块）
-
HTML 结构：
- 一个
<div id="child">：包裹顶层文字祝福，通过定位固定在屏幕正中央。 - 一个
<canvas id="pinkboard">：绘制爱心粒子特效，位于代码雨上层、文字下层。
- 一个
-
CSS 样式：
- 全局设置 html/body 全屏、黑色背景，确保动画覆盖完整屏幕。
- 文字容器
#child用position: fixed固定在屏幕中心（通过top:50%+left:50%+ 负边距实现居中）。 - 文字
h4设置楷体、40px 大小、粉色系颜色，突出显示。 - canvas 采用绝对定位，全屏覆盖，确保粒子动画铺满屏幕。
-
JS 核心逻辑：这部分代码更复杂，采用面向对象设计，分为 4 个核心模块：
-
配置项（settings） ：定义粒子参数，可灵活调整效果：
- 粒子数量（500 个）、持续时间（2 秒）、移动速度（100 像素 / 秒）。
- 粒子大小（30px）、运动效果系数（-0.75），控制粒子飘散轨迹。
-
工具类：
Point类：处理坐标计算（克隆、长度、归一化），用于粒子的位置、速度、加速度计算。Particle类：定义粒子的初始化、更新、绘制逻辑，粒子会从初始位置按设定速度 + 加速度运动，同时透明度和大小随时间变化（逐渐消失）。ParticlePool类：粒子池管理，复用粒子对象（避免频繁创建销毁性能损耗），控制粒子的添加、更新、绘制队列。
-
爱心路径生成：
- 通过数学公式
pointOnHeart(t)计算爱心轮廓上的点（利用三角函数模拟爱心曲线）。 - 用临时 canvas 绘制爱心形状，生成粒子的原型图像（粉色填充）。
- 通过数学公式
-
动画主逻辑：
- 每隔固定时间从爱心轮廓上随机位置生成粒子，粒子沿爱心径向向外飘散。
- 用
requestAnimationFrame实现流畅动画循环，更新粒子位置并绘制。 - 监听窗口 resize 事件，动态调整 canvas 尺寸，适配屏幕变化。
-
3. 额外功能（注释状态）
代码底部有一个被注释的<audio>标签，原本计划添加背景音乐（Alan Walker-Faded），目前未启用，解除注释后可实现 "视觉 + 听觉" 双重浪漫效果。
三、关键技术亮点
-
Canvas 动画优化：
- 两个 canvas 叠加显示，通过 z-index（默认按标签顺序，后定义的 canvas 在上）实现分层效果。
- 粒子池复用机制，避免 500 个粒子频繁创建销毁导致的性能问题。
-
数学与视觉结合：
- 用三角函数生成标准爱心轮廓，确保粒子飘散的源头是规整的爱心形状。
- 代码雨的拖影效果通过半透明背景叠加实现，无需复杂的运动轨迹计算。
-
适配性设计：
- 监听窗口 resize 事件，动态调整 canvas 尺寸，确保在不同设备（电脑、平板）上都能全屏显示。
- 文字居中采用 "50% 定位 + 负边距" 方案，兼容所有浏览器。
四、效果特点与可修改方向
-
优点：动态效果流畅，粉色与黑色对比强烈，浪漫氛围突出；代码结构模块化，便于调整参数（如粒子数量、颜色、文字内容）。
-
可修改点：
- 更改
messages数组中的文字，替换为自定义祝福。 - 调整
bg_colors或粒子颜色（#ea80b0、#f584b7），切换主题色调（如蓝色、红色）。 - 启用音频标签，添加喜欢的背景音乐。
- 修改代码雨文字数组
texts，替换为中文（如 "永远爱你"）。
- 更改