HTML情人节爱心代码

系列专栏

《Python趣味编程》
《C/C++趣味编程》
《HTML趣味编程》
《Java趣味编程》

写在前面

HTML语言实现情人节动态爱心的代码。

技术需求

HTML5 Canvas: 用于绘制动态图形，提供了 2d 上下文（getContext("2d")）来绘制图形和处理动画效果。<canvas> 元素被用作绘制心形图案和处理动画的画布。
CSS3: 用于样式设置，主要是设置页面的背景色、文本样式、以及响应式字体大小。@media 查询用于适配不同屏幕尺寸，确保在更大屏幕上标题字体更大。
JavaScript: 主要实现了页面的交互效果，特别是心形动画的生成和控制。具体实现了：
- 事件监听：通过 mousemove 和 touchmove 事件监听用户的鼠标或触摸操作，用于在鼠标或触摸点的位置生成心形图案。
- 自定义对象：定义了 Heart 构造函数来表示心形对象，封装了心形的属性（位置、大小、速度等）以及绘制方法。
- 动画循环：通过 requestAnimationFrame 实现动画的平滑渲染，定时更新心形的位置和大小，使其呈现动态效果。
数学计算: 用于生成心形的几何路径。通过三角函数（正弦和余弦）计算出心形的每个顶点坐标。每个心形对象根据随机生成的数学公式来确定其形状。
CSS3 动画和阴影效果: 使用了 box-shadow 和 shadowBlur 实现心形的发光效果，使动画更加生动。 globalAlpha 用来控制透明度，使得心形逐渐消失。

完整代码

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>情人节快乐！</title>

  <style>
    body {
      overflow: hidden;
      margin: 0;
      background: pink;
    }

    h1 {
      position: fixed;
      top: 40%;
      left: 0;
      width: 100%;
      text-align: center;
      transform: translateY(-50%);
      font-family: 'Love Ya Like A Sister', cursive;
      font-size: 40px;
      color: red;
      padding: 0 20px;
    }


……

代码分析

这段HTML、CSS和JavaScript代码实现了一个充满粉红色背景和动态心形动画的情人节祝福效果。该页面利用了HTML5的<canvas>元素来绘制动态的心形图案，并通过CSS和JavaScript的配合实现了互动效果。以下将从HTML结构、CSS样式、JavaScript动画、事件处理等多个方面详细分析这段代码。

一、HTML结构分析

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>情人节快乐！</title>
  <style>...</style>
</head>

<body>
  <canvas></canvas>
  <h1>情人节快乐！</h1>
  <script>...</script>
</body>

</html>

这段HTML代码非常简洁，由以下几个主要部分构成：

DOCTYPE声明：使用<!doctype html>声明HTML5文档类型，告诉浏览器以HTML5的标准进行渲染。
头部（<head>）：包含了页面的字符编码（UTF-8），标题（情人节快乐！），以及内部样式（<style>标签中定义的CSS样式）。
主体（<body>）：包含一个<canvas>元素和一个<h1>标题。<canvas>用于绘制动态心形，<h1>则显示静态的“情人节快乐！”文本。
脚本（<script>）：包含JavaScript代码，实现了心形动画的逻辑。

二、CSS样式分析

body {
  overflow: hidden;
  margin: 0;
  background: pink;
}

h1 {
  position: fixed;
  top: 40%;
  left: 0;
  width: 100%;
  text-align: center;
  transform: translateY(-50%);
  font-family: 'Love Ya Like A Sister', cursive;
  font-size: 40px;
  color: red;
  padding: 0 20px;
}

@media (min-width:1200px) {
  h1 {
    font-size: 100px;
  }
}

CSS部分主要处理了页面的布局、样式以及响应式设计。

body样式：
- overflow: hidden;：使得页面内容不会出现滚动条，确保页面的背景不会被滚动内容遮挡。
- margin: 0;：去除了默认的页面外边距，使页面布局更加精确。
- background: pink;：设置背景色为粉色，这与情人节的浪漫主题相符合。
h1样式：
- position: fixed;：使标题固定在页面顶部，不随页面滚动而变化。
- top: 40%; 和 transform: translateY(-50%);：确保标题垂直居中显示。
- font-family: 'Love Ya Like A Sister', cursive;：使用手写体字体，增加浪漫感。
- font-size: 40px;：初始字体大小为40像素。
- color: red;：标题颜色为红色，符合情人节的主题。
- @media (min-width:1200px) {...}：设置响应式样式，当屏幕宽度大于1200px时，h1字体大小增大为100px。

三、JavaScript部分分析

JavaScript部分是本段代码的核心，负责创建和渲染心形动画。主要功能包括：

初始化canvas元素和画布上下文（ctx）。
设置窗口尺寸变化时重新调整画布大小。
处理鼠标或触摸移动事件，根据用户的移动生成心形。
动态绘制心形，并为每个心形设置不同的运动速度、大小、透明度等属性。
定时清除画布并重新绘制所有活跃的心形。

1. 初始化画布

首先，代码获取了页面中的<canvas>元素，并获取其2D绘图上下文ctx，ctx是用于在画布上绘图的对象。通过onResize函数，在窗口大小变化时重新设置画布的宽度和高度，使得画布充满整个浏览器窗口。

2. 事件处理：鼠标和触摸事件

该部分代码通过onMove事件监听函数捕获鼠标或触摸事件。每当鼠标移动或触摸屏幕时，都会创建新的Heart对象，并将其添加到hearts数组中。这样，每次用户移动鼠标或触摸屏幕时，就会生成新的心形。

3. Heart对象

Heart构造函数是心形的模型。每个Heart对象都有以下属性：

x、y：心形的坐标，默认为随机位置。
size：心形的初始大小，随机生成。
speedX、speedY：心形的水平和垂直速度，决定心形的移动方向和速度。
speedSize：心形的缩小速度，使得心形会逐渐变小。
opacity：心形的透明度，随着心形的缩小而逐渐消失。
vertices：心形的顶点数组，用数学公式生成心形的路径。

4. 绘制心形

每个心形通过draw方法来绘制。方法内部，心形会随着时间的推移逐渐变小、移动，并且随着心形的缩小，透明度和阴影效果也会发生变化。心形的路径是通过事先计算的顶点（vertices）来绘制的，最终形成一个典型的心形图案。

5. 渲染和动画循环

render函数是动画的核心。通过requestAnimationFrame实现平滑的动画效果，每一帧都会清除画布并重新绘制所有心形。如果某个心形的大小小于等于零，就将其从数组中移除，避免不必要的内存占用。

6. 事件监听和初始化

这部分代码添加了对页面尺寸变化、鼠标移动和触摸事件的监听，并启动了动画循环。

四、总结

这段代码通过HTML5的<canvas>元素实现了一个浪漫的情人节动态效果，利用JavaScript控制心形的生成、移动、缩小和消失。通过CSS优化了页面的样式和响应式布局。代码结构清晰，逻辑严谨，使用了多种Web技术（HTML、CSS、JavaScript）来创建一个互动的情人节祝福页面，适合用作个人网站或节日庆祝页面的装饰。

系列文章

序号	目录
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哆啦A梦
22	HTML流星雨
23	HTML沙漏爱心
24	HTML爱心字母雨
25	HTML爱心流星雨
26	HTML生日蛋糕
27	HTML3D旋转相册
28	HTML流光爱心
29	HTML粉色爱心
30	HTML满屏飘字
31	HTML飞舞爱心
32	HTML音乐圣诞树
33	HTML星空圣诞树
34	HTML礼物圣诞树
35	HTML旋转圣诞树
36	HTML炫酷烟花①
37	HTML炫酷烟花②
38	HTML炫酷烟花③
39	HTML炫酷烟花④
40	HTML炫酷烟花⑤
41	HTML新春烟花⑥

写在后面

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