代码关键部分解释
-
Canvas基础配置：
- 将Canvas原点移到中心（
ctx.translate），解决Canvas默认原点在左上角的问题，方便绘制对称爱心； - 设置黑色背景，还原剧中的暗黑氛围感，让彩色爱心更突出。
- 将Canvas原点移到中心（
-
心形公式实现：
- 核心是笛卡尔心形公式 $x^2 + (y - \sqrt{|x|})^2 = 1$，通过
getHeartY(x)函数计算对应y值； - 计算上下两部分y值（
y1和y2），实现爱心的对称结构。
- 核心是笛卡尔心形公式 $x^2 + (y - \sqrt{|x|})^2 = 1$，通过
-
动态绘制与渐变：
- 用
progress变量控制绘制进度，通过requestAnimationFrame实现逐帧动画，模拟剧中“逐步生成爱心”的效果； - 颜色渐变：根据x轴位置计算RGB值，从浅粉色（#ff99cc）平滑过渡到深红色（#ff0033）。
- 用
-
坐标系适配：
- Canvas默认y轴向下，因此在绘制时给y值加负号（
-y1 * scale），让爱心正立显示； - 通过
scale缩放系数，将公式的(-1,1)范围映射到Canvas的可视区域。
- Canvas默认y轴向下，因此在绘制时给y值加负号（
运行说明
- 将代码复制到文本编辑器（如记事本、VS Code）；
- 保存为
heart.html（注意文件后缀是.html）； - 双击该文件，用任意浏览器（Chrome、Edge、Firefox等）打开，即可看到爱心动态绘制的效果。
总结
- 核心依赖HTML5 Canvas实现图形绘制，无需额外库，浏览器原生支持；
- 基于笛卡尔心形数学公式计算坐标，保证爱心形状的经典还原；
- 通过
requestAnimationFrame实现动态绘制动画，搭配RGB颜色渐变，还原剧中的视觉氛围感。
`
Lᵒᵛᵉ ᵧₒᵤ ❤️
<script>// 获取Canvas元素和绘图上下文const canvas = document.getElementById('heartCanvas');const ctx = canvas.getContext('2d');// 设置Canvas尺寸（适配屏幕，居中显示）const canvasSize = 600;canvas.width = canvasSize;canvas.height = canvasSize;// 坐标系偏移：将原点移到Canvas中心，方便绘制对称爱心ctx.translate(canvasSize / 2, canvasSize / 2);// 缩放系数，适配Canvas尺寸const scale = 80;// 定义笛卡尔心形公式：x² + (y - √|x|)² = 1// 计算给定x对应的y值function getHeartY(x) {return Math.sqrt(1 - Math.pow(x, 2)) + Math.pow(Math.abs(x), 1/3);}// 动态绘制的进度（0~1）let progress = 0;// 绘制的步长（越小越平滑）const step = 0.01;// 核心绘制函数function drawHeart() {// 清空画布（保留背景）ctx.clearRect(-canvasSize/2, -canvasSize/2, canvasSize, canvasSize);// 遍历x轴，范围-1到1（心形公式的有效范围）for (let x = -1; x <= 1 && x <= progress; x += step) {// 计算上下两部分的y值（对称爱心）const y1 = getHeartY(x);const y2 = -getHeartY(x);// 计算渐变颜色：从浅粉(#ff99cc)到深红(#ff0033)// 根据x的位置（-1~1）映射颜色值const colorRatio = (x + 1) / 2; // 0~1的比例const r = 255;const g = Math.floor(153 - colorRatio * 153); // 153→0const b = Math.floor(204 - colorRatio * 171); // 204→33const color = `rgb(${r}, ${g}, ${b})`;// 绘制上半部分点drawPoint(x * scale, -y1 * scale, color); // 负号调整y轴方向（Canvas y轴向下）// 绘制下半部分点drawPoint(x * scale, -y2 * scale, color);}// 增加进度，实现动态绘制效果if (progress < 1) {progress += 0.005;requestAnimationFrame(drawHeart); // 循环绘制，形成动画}}// 绘制单个点（用小矩形模拟，更清晰）function drawPoint(x, y, color) {ctx.fillStyle = color;ctx.fillRect(x, y, 2, 2); // 点的大小：2x2像素}// 启动绘制drawHeart();
</script>