【HTML】情人节给npy一颗炫酷的爱心_html canvas 画爱心-CSDN博客

本文链接：https://blog.csdn.net/qq_44214428/article/details/136111233

本文介绍了如何使用JavaScript和Canvas在情人节期间制作一个炫酷的爱心图形，并通过粒子特效增强视觉效果，展示了requestAnimationFrame的运用。作者还分享了代码示例和实现步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

🌈个人主页: 鑫宝Code
🔥热门专栏: 闲话杂谈｜炫酷HTML | JavaScript基础
💫个人格言: "如无必要，勿增实体"

文章目录

- - 闲谈
  - 开干
  - 粒子特效
  - 最后

闲谈

兄弟们，这不情人节快要到了，我该送女朋友什么🎁呢？哦，对了，差点忘了，我好像没有女朋友。

不过这不影响我们要过这个节日，我们可以学习技术。举个简单的🌰：比如说，今天我们学习了如何画一颗炫酷的💗，以后找到了女朋友忘准备礼物了，是不是可以用这个救救场，🐶。

开干

首先，我们需要画一个💗的形状出来，例如下面这样

这个简单，我们通过豆包搜一波公式即可。公式如下：

$x(t) = 16\sin^3(t)$
$2\cos(3t) - cos(4t)$

思路: 利用上面的公式，我们只需要根据许许多多的t去求得x,y的坐标，然后将这些点画出来即可。
使用Canvas时用到的一些函数解释,这里moveTo和lineTo还是有点上头的：

// 获取到一个绘图环境对象，这个对象提供了丰富的API来执行各种图形绘制和图像处理操作
ctx = canvas.getContext('2d');
/** 
该方法用于在当前路径上从当前点画一条直线到指定的 (x, y) 坐标。
当调用 lineTo 后，路径会自动延伸到新指定的点，并且如果之前已经调用了 beginPath() 或 moveTo()，则这条线段会连接到前一个点。
要看到实际的线条显示在画布上，需要调用 stroke() 方法。
*/
ctx.lineTo(x, y);
/**
此方法用于移动当前路径的起始点到指定的 (x, y) 坐标位置，但不会画出任何可见的线条。
它主要用于开始一个新的子路径或者在现有路径之间创建空隙。当你想要从一个地方不连续地移动到另一个地方绘制时，就需要使用 moveTo。
*/
ctx.moveTo(x, y);

友情提示：上面的函数是个倒的爱心，所以Y轴要取负数。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>LoveCanvas</title>
    <style>
      body {
     
        background: black;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas"></canvas>
  </body>
  <script>
    const canvas = document.getElementById("canvas");
    const ctx = canvas.getContext("2d");
    const themeColor = "#d63e83";
    // 爱心线的实体
    let loveLine = null