目录
写在前面
完整代码
代码分析
系列推荐
写在最后
写在前面
本期小编给大家带来了爱心与字母雨的融合效果，既实用又炫酷，快来看看吧~
HTML，全称为HyperText Markup Language，是用于创建网页的标准标记语言。自1990年由蒂姆·伯纳斯-李发明以来，HTML经历了多个版本的迭代，最新的标准是HTML5。它通过使用一系列预定义的元素来描述文档的结构和内容，如段落、标题、链接、图像和表格等。HTML文档由浏览器解析并呈现为可视化的网页。尽管HTML主要用于结构化内容，但与CSS（层叠样式表）和JavaScript结合使用时，可以实现更复杂的页面设计和动态交互功能。HTML是万维网的基础，任何想要在互联网上发布信息的人都需要掌握其基本语法。
CSS，全称为层叠样式表（Cascading Style Sheets），是一种用于描述网页文档结构化语言（如HTML或XML）外观和格式的样式设计语言。它能够实现网页内容与表现形式的分离，使开发者可以独立控制网页布局、颜色、字体、大小等视觉元素，而无需在HTML代码中嵌入格式信息。通过使用CSS，可以极大提高网站的可维护性、可访问性和跨平台兼容性，同时简化网页开发流程，使得网站设计更加灵活和高效。CSS支持各种选择器来定位页面元素，并通过层叠规则决定最终应用的样式，还可以利用媒体查询为不同设备提供响应式设计，确保网站在多种屏幕尺寸上都能呈现出良好的视觉效果。
JavaScript是一种轻量级、解释型的编程语言，主要用于实现网页上的动态效果和交互功能。它最初由Netscape公司的Brendan Eich于1995年开发，旨在为静态的HTML页面添加动态行为。JavaScript能够操作网页文档对象模型（DOM），修改HTML和CSS，从而改变网页的内容、样式和布局。
JavaScript是一种多范式语言，支持面向对象、命令式和函数式编程风格。它不仅限于浏览器环境，还能在服务器端运行，如Node.js平台，以及移动应用、桌面应用和物联网设备中。JavaScript的强大之处在于其广泛的库和框架，如React、Angular和Vue.js，它们极大地简化了复杂Web应用的开发过程。
完整代码
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>💗</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>
<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>
</HTML>代码分析
字母雨部分
HTML结构
-
<canvas>元素：用于绘制动画，ID为canvas。 -
<style>元素：CSS样式定义了页面和画布的布局，移除了默认的边距和滚动条。
JavaScript代码
-
填充背景：使用半透明的黑色填充画布，产生渐隐效果。
-
设置文本样式：文本颜色为粉红色（
#f584b7），字体为Arial。 -
绘制字符：随机选择字符并绘制到相应位置，根据条件重置下落位置，产生字符雨效果。
-
获取画布和上下文：通过
getElementById获取canvas元素，并通过getContext('2d')获取2D绘图上下文。 -
设置画布尺寸：画布的宽高设置为窗口的宽高，以确保动画覆盖整个视窗。
-
定义文本和字体大小：将文本'I LOVE U'拆分为字符数组，并设置字体大小为16px。
-
计算列数和初始化下落位置：根据画布宽度和字体大小计算出列数，并初始化每列的下落起始位置为1。
-
绘制函数：主要执行以下步骤：
爱心部分
HTML结构
-
<canvas>元素：用于绘制动画，ID为pinkboard。 -
样式定义：CSS样式将背景设置为黑色，并调整画布和文本的位置和大小。
JavaScript代码
-
设置粒子效果参数：定义粒子的数量、持续时间、速度、效果和大小等参数。
-
动画帧处理：使用
requestAnimationFrame确保动画流畅。 -
粒子类和池：定义粒子的属性和方法，包括初始化、更新、绘制等。粒子池管理粒子的创建、更新和移除。
-
心形路径计算：通过数学函数计算心形路径上的点，用于粒子初始化。
-
创建粒子图像：在一个临时画布上绘制心形路径，并生成图像供粒子绘制使用。
-
渲染函数：计算时间差，清除画布，生成新粒子，更新并绘制现有粒子，形成心形粒子动画效果。
-
画布大小调整：窗口大小变化时调整画布尺寸，确保动画适应视窗。
总结
-
第一个动画部分：实现字符雨效果，字符'I LOVE U'随机下落，形成动态文字雨。
-
第二个动画部分：实现心形粒子效果，通过粒子在心形路径上运动，绘制出心形粒子图案。
系列推荐
| 序号 | 目录 |
|---|---|
| 1 | HTML满屏跳动的爱心（可写字） |
| 2 | HTML五彩缤纷的爱心 |
| 3 | HTML满屏漂浮爱心 |
| 4 | HTML情人节快乐 |
| 5 | HTML蓝色爱心射线 |
| 6 | HTML跳动的爱心（简易版） |
| 7 | HTML粒子爱心 |
| 8 | HTML蓝色动态爱心 |
| 9 | HTML跳动的爱心（双心版） |
| 10 | HTML橙色动态粒子爱心 |
| 11 | HTML旋转爱心 |
| 12 | HTML爱情树 |
| 13 | HTML3D相册 |
| 14 | HTML旋转相册 |
| 15 | HTML基础烟花秀 |
| 16 | HTML炫酷烟花秀 |
| 17 | HTML粉色烟花秀 |
| 18 | HTML新春烟花 |
| 19 | HTML龙年大吉 |
| 20 | HTML圣诞树 |
| 21 | HTML大雪纷飞 |
| 22 | HTML想见你 |
| 23 | HTML元素周期表 |
| 24 | HTML飞舞的花瓣 |
| 25 | HTML星空特效 |
| 26 | HTML黑客帝国字母雨 |
| 27 | HTML哆啦A梦 |
| 28 | HTML流星雨 |
| 29 | HTML沙漏爱心 |
| 30 | HTML爱心字母雨 |
写在最后
我是一只有趣的兔子，感谢你的喜欢！
![[AI]从零开始的so-vits-svc webui部署教程(小白向)](https://i-blog.csdnimg.cn/direct/a50225e1883342acada23cbb1a401d9b.png)
