使用Canvas API绘制爱心需通过贝塞尔曲线或参数方程生成路径：贝塞尔法用两次bezierCurveTo构建左右半边并闭合；参数方程法则依x=16sin³t、y=13cost−5cos2t−2cos3t−cos4t采样描点连线。
如果您希望使用HTML5的Canvas API绘制一个爱心图形，则需要通过贝塞尔曲线或数学函数生成心形路径。以下是实现此效果的具体步骤与技巧：
一、使用贝塞尔曲线绘制爱心
贝塞尔曲线能精确控制路径的弯曲程度，适合构建对称且平滑的心形轮廓。该方法依赖两个三次贝塞尔曲线分别构成心形的左右半边，并在顶部交汇于尖点。
1、创建元素并获取其2D绘图上下文。
2、设置画布宽高为400×400像素，确保中心点位于(200, 200)。
立即学习“前端免费学习笔记（深入）”；
3、调用beginPath()开始新路径。
4、使用moveTo(200, 100)将起点设在心形顶部尖点。
5、执行bezierCurveTo(100, 50, 100, 150, 200, 200)绘制右下半边曲线。
6、执行bezierCurveTo(300, 150, 300, 50, 200, 100)绘制左下半边曲线并闭合至起点。
7、调用fillStyle = "#ff4757"设置填充色，再执行fill()完成渲染。
二、利用参数方程生成爱心路径
心形可由极坐标或笛卡尔坐标下的参数方程描述，例如经典公式：x = 16sin³t，y = 13cost − 5cos2t − 2cos3t − cos4t。该方法能生成更标准的心形轮廓，适用于高精度需求场景。
1、定义空数组用于存储计算出的顶点坐标。
2、使用for (let t = 0; t 循环遍历角度参数。
3、按公式计算每个t对应的x、y值，并缩放后平移至画布中心。
4、首次迭代时调用moveTo(x, y)，后续调用lineTo(x, y)连接各点。
5、循环结束后调用closePath()闭合路径。
6、设置fillStyle为红色系颜色并执行fill()。
三、添加动画效果使爱心跳动
通过动态缩放变换模拟心跳节奏，增强视觉表现力。该效果基于requestAnimationFrame循环更新缩放比例，并结合正弦函数生成周期性变化。
1、声明变量scale = 1作为初始缩放因子。
2、在动画主循环中，使用scale = 1 + 0.1 * Math.sin(Date.now() / 200)实时更新数值。
3、调用save()保存当前绘图状态。
4、使用translate(200, 200)将坐标原点移至画布中心。
5、执行scale(scale, scale)应用缩放变换。
6、再次translate(-200, -200)还原绘制偏移，确保路径位置不变。
7、重新绘制爱心路径并填充。
四、使用CSS渐变填充爱心
CSS线性或径向渐变可替代纯色填充，提升图形质感。Canvas本身不支持直接应用CSS渐变，但可通过createLinearGradient或createRadialGradient在上下文中创建对应对象。
1、调用const gradient = ctx.createRadialGradient(200, 150, 10, 200, 150, 100)创建径向渐变对象。
2、依次添加色标：gradient.addColorStop(0, "#ff9ff3")和gradient.addColorStop(1, "#ff6b6b")。
3、将fillStyle赋值为该渐变对象而非颜色字符串。
4、执行fill()时自动应用渐变效果。
5、确保路径已正确闭合且未被其他未闭合路径干扰。
五、响应式适配不同屏幕尺寸
为保证爱心在各类设备上正常显示，需根据窗口宽度动态调整画布尺寸与绘图坐标。该方法避免图形被裁剪或过度拉伸。
1、监听window.resize事件，在回调中获取window.innerWidth和window.innerHeight。
2、将画布width和height属性设为视口尺寸的80%，取较小值作为基准。
3、重置ctx的lineWidth为新尺寸的2%以保持线条粗细协调。
4、重新计算所有路径坐标的缩放系数，例如scaleFactor = canvas.width / 400。
5、在绘制每一点前乘以该系数，如x * scaleFactor、y * scaleFactor。
6、清除画布后重新调用完整绘制流程。
