简介这份源码资源面向对数学可视化与前端开发感兴趣的开发者围绕笛卡尔心形线这一经典平面曲线提供从数学方程到网页绘制的完整实现思路。资源包共3个文件以html页面为主体辅以inscode配置与gitignore文件压缩包约6KB轻量易读可直接在浏览器中打开运行并查看绘制效果。内容涵盖直角坐标系方程与极坐标方程r1-sin(θ)的解析并借助HTML5 canvas逐步计算坐标点完成曲线绘制同时给出参数方程生成更美观心形的方案以及空心心形绘制与性能优化建议。读者可从中获得可直接复用的绘图代码、坐标计算与路径绘制方法并了解用CSS或贝塞尔曲线等替代方式实现心形线的思路。目前已有193人学习适合希望把数学公式转化为可视化效果的开发者参考实践。1. 笛卡尔心形线绘制一条公式背后的坐标系陷阱很多人第一次在屏幕上画出那条心形曲线靠的是把r a(1 - sinθ)直接塞进极坐标绘图函数结果要么图形歪了要么尖角对不上要么在 Web 端和桌面端渲染出两个完全不同的形状。笛卡尔心形线绘制看起来是个入门级的数学可视化练习但它同时踩中了三个容易翻车的点极坐标与直角坐标的转换方向、参数 a 对图形缩放与朝向的控制、以及不同渲染后端对浮点精度和坐标原点的默认约定。这篇笔记面向的是想把这套绘制逻辑真正落到代码里的开发者——不管你是要嵌进教学演示、做节日彩蛋还是把它当成图形管线的最小验证用例。我会从公式推导讲到可复现的绘制脚本再把参数调节、性能边界和常见报错逐条拆开。源码层面的东西不神秘难的是知道哪一行该改、改了之后图形为什么变。2. 从极坐标方程到屏幕像素心形线的数学底子与选型2.1 两个经典方程选哪个决定了你的图形朝向笛卡尔心形线在极坐标下有两个流传最广的写法。第一个是r a(1 - sinθ)第二个是r a(1 cosθ)。这两个方程画出来的形状完全一样只是旋转了角度。1 - sinθ在 θ π/2 时 r 取到最小值 0也就是心形的凹点朝上1 cosθ在 θ 0 时 r 最小凹点朝右。如果你在网页上画完发现心形是躺着的八成是方程选错了而不是绘图库有问题。我一般会先确定「尖角朝哪」再反推方程。尖角朝下最常见的贺卡造型用r a(1 - sinθ)此时 θ 从 0 到 2π 扫一遍r 在 θ π/2 处归零形成凹口。尖角朝左用r a(1 - cosθ)。这个对应关系记牢后面调参就不会来回试。还有一个容易被忽略的点极坐标转直角坐标的公式是x r·cosθy r·sinθ。很多人写代码时把 sin 和 cos 写反图形会变成旋转 90 度的版本看起来「差不多但就是不对」。这不是玄学是坐标系定义问题。2.2 参数 a 不只是缩放它还决定采样密度够不够参数 a 在数学上是缩放因子r 的最大值是 2a当 sinθ -1 时。但在代码里a 还间接影响你需要的采样点数。θ 的步长如果固定为 0.01 弧度a 很小时图形在屏幕上只有几十像素采样点密到浪费a 很大时图形铺满画布同样的步长会在曲率大的地方出现明显折线。我的经验值是让 θ 的采样数 N 满足N ≥ 8πa / pixelSize其中 pixelSize 是你希望的最小可分辨像素。实际写的时候不用这么精确直接取 N 2000 到 5000 对大多数屏幕尺寸都够用。如果画出来边缘有棱角先把 N 翻倍试试而不是去调渲染库的抗锯齿参数。下面是一个最小可复现的 Python 绘制脚本用 matplotlib 输出同时把极坐标和直角坐标两条路径都写出来方便对照import numpy as np import matplotlib.pyplot as plt # 参数设置 a 1.0 theta np.linspace(0, 2 * np.pi, 3000) # 采样点数3000 对多数场景足够 # 极坐标方程尖角朝下 r a * (1 - np.sin(theta)) # 极坐标转直角坐标 x r * np.cos(theta) y r * np.sin(theta) # 绘制 fig, ax plt.subplots(figsize(6, 6)) ax.plot(x, y, colorcrimson, linewidth2) ax.set_aspect(equal) # 关键等比例坐标轴否则心形会被拉扁 ax.axis(off) plt.savefig(heart.png, dpi150, bbox_inchestight) plt.show()逻辑说明np.linspace(0, 2*np.pi, 3000)生成 3000 个均匀分布的 θ 值覆盖完整一圈。r a * (1 - np.sin(theta))是核心方程改这里的符号就能翻转朝向。ax.set_aspect(equal)是必须的否则 matplotlib 默认按画布比例拉伸坐标轴心形会变成「胖心」或「瘦心」。参数 a 控制整体大小改 a 的时候记得同步检查 N 是否还够用。2.3 在 Web 端用 Canvas 画坐标系原点是个坑如果把同样的逻辑搬到 HTML5 Canvas第一件事就是处理坐标系差异。Canvas 的原点在左上角y 轴向下而数学坐标系原点在中心y 轴向上。直接套公式画出来的心形是倒的而且偏在角落。常见做法是先把画布原点平移到中心再翻转 y 轴const canvas document.getElementById(heart); const ctx canvas.getContext(2d); const w canvas.width, h canvas.height; ctx.translate(w / 2, h / 2); // 原点移到画布中心 ctx.scale(1, -1); // 翻转 y 轴让数学坐标和屏幕坐标一致 const a 100; // 缩放因子单位是像素 const N 3000; ctx.beginPath(); for (let i 0; i N; i) { const theta (i / N) * 2 * Math.PI; const r a * (1 - Math.sin(theta)); const x r * Math.cos(theta); const y r * Math.sin(theta); if (i 0) ctx.moveTo(x, y); else ctx.lineTo(x, y); } ctx.strokeStyle #e63946; ctx.lineWidth 2; ctx.stroke();这里ctx.scale(1, -1)之后文字和线宽也会被翻转如果后续要加标注得再翻转回来或者单独处理。另一个细节是a的单位变成了像素取 100 左右在 400x400 的画布上比较合适。N 取 3000 时Canvas 的路径点数在移动端也能流畅渲染再高就要考虑用requestAnimationFrame分帧或者降采样。3. 参数调节与渲染优化让心形线在不同设备上一致3.1 三个必调参数a、N、lineWidtha 决定大小N 决定平滑度lineWidth 决定视觉粗细。这三个参数不是独立的。a 变大时如果 N 不变曲率大的地方心形凹口两侧会出现明显折线lineWidth 变大时折线会被部分掩盖但尖角处会变钝。我一般按这个顺序调先定 a 让图形占画布 70% 左右再定 N 让边缘看不出折线最后调 lineWidth 到视觉舒适。如果设备性能有限优先降 N因为 lineWidth 对性能影响很小。下面这张表是我在几个典型场景下的取值参考场景a像素NlineWidth移动端小图标408001.5网页贺卡12030002桌面高清导出40080003教学演示动画8020002注意 N 不是越大越好。超过 10000 之后大多数屏幕上看不出区别但路径计算和内存占用会明显上升。在 Canvas 里N 超过 8000 时部分低端手机会掉帧。3.2 用参数方程直接画绕过极坐标的另一种写法除了极坐标心形线也可以用直角坐标的参数方程表示x 16 sin³t y 13 cos t - 5 cos 2t - 2 cos 3t - cos 4t这个版本不需要处理 r 和 θ 的转换直接算 x 和 y适合嵌进已经有参数方程绘图管线的项目。但它的缩放不是线性的a 不能直接乘进去要整体乘一个缩放系数。另外这个方程的尖角朝上和r a(1 - sinθ)的朝向相反用的时候注意翻转。我一般在需要和现有贝塞尔曲线管线混用时选参数方程版本因为它的输出直接就是 x、y 坐标序列不用再做极坐标转换。如果只是单纯画一个心形极坐标版本更直观调参也更容易理解。3.3 抗锯齿与像素对齐为什么导出的图有毛边在 Canvas 和 SVG 里线条的抗锯齿是默认开的但如果你把心形线画在非整数坐标上或者 lineWidth 是奇数而坐标是整数边缘会出现半透明像素导出成 PNG 后看起来有毛边。解决办法有两个一是把坐标对齐到 0.5 像素偏移二是导出时用 2 倍分辨率再缩小。我通常用第二种因为不用改绘制逻辑。在 Canvas 里设置canvas.width 800; canvas.height 800;但 CSS 显示为 400x400浏览器会自动做降采样边缘会平滑很多。SVG 的话直接设置shape-renderinggeometricPrecision然后把 viewBox 设成实际坐标范围让浏览器自己处理缩放。不要手动去调stroke-width的小数位那是给自己找麻烦。4. 避坑与排查心形线绘制中最容易翻车的五个点4.1 图形倒置或旋转先检查 sin 和 cos 有没有写反现象画出来的心形尖角朝上或朝左和预期不符。 原因极坐标转直角坐标时x r·cosθ、y r·sinθ写反或者方程选了1 cosθ但想要的是1 - sinθ的朝向。 解决先确认尖角方向再对照方程表。尖角朝下用1 - sinθ朝左用1 - cosθ朝上用1 sinθ朝右用1 cosθ。转换公式固定为 x 配 cos、y 配 sin不要凭感觉换。4.2 图形被拉扁或拉长等比例坐标轴没设现象心形看起来比预期胖或瘦左右不对称。 原因绘图库默认按画布宽高比拉伸坐标轴数学上的等比例被破坏。 解决matplotlib 加ax.set_aspect(equal)Canvas 里确保画布是正方形或者手动计算缩放系数让 x 和 y 的像素比例一致SVG 里用preserveAspectRatioxMidYMid meet。4.3 边缘有折线采样点数不够现象心形曲率大的地方凹口两侧出现明显直线段。 原因θ 的采样步长太大N 太小。 解决把 N 翻倍。如果翻倍后还有折线检查是不是 a 太大导致同样 N 下曲率相对更陡。经验公式N 至少取8 * aa 以像素为单位时。移动端如果性能吃紧可以在曲率大的区间单独加密采样而不是全局提高 N。4.4 导出图片有白边或裁切bbox 和 padding 没设对现象保存的 PNG 四周有空白或者心形尖角被切掉。 原因matplotlib 默认按数据范围加 paddingCanvas 导出时没有把绘制内容居中。 解决matplotlib 用bbox_inchestight并配合pad_inches0Canvas 导出前先计算心形的包围盒把画布尺寸设成包围盒加少量边距或者用ctx.getImageData手动裁剪。4.5 不同设备上大小不一致用了固定像素但没处理 DPR现象同一份代码在普通屏和 Retina 屏上心形大小差一倍或者模糊。 原因Canvas 的像素尺寸和 CSS 显示尺寸没有按 devicePixelRatio 缩放。 解决设置canvas.width cssWidth * window.devicePixelRatio然后ctx.scale(dpr, dpr)这样绘制逻辑里的坐标还是 CSS 像素但实际渲染分辨率翻倍。注意ctx.scale之后 lineWidth 也会被缩放如果不想线变粗要手动除以 dpr。5. 进阶技巧把心形线做成可交互的参数化组件5.1 用滑块实时调 a 和 N观察图形变化把 a 和 N 做成输入控件实时重绘是理解参数影响最快的方式。下面是一个最小交互页面的核心逻辑function drawHeart(a, N) { ctx.clearRect(-w, -h, 2 * w, 2 * h); // 注意坐标系已平移清除范围要覆盖 ctx.beginPath(); for (let i 0; i N; i) { const theta (i / N) * 2 * Math.PI; const r a * (1 - Math.sin(theta)); const x r * Math.cos(theta); const y r * Math.sin(theta); i 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y); } ctx.stroke(); } // 绑定滑块 document.getElementById(aSlider).addEventListener(input, (e) { drawHeart(parseFloat(e.target.value), currentN); });这里clearRect的范围要覆盖整个画布因为之前做了translate和scale清除坐标是变换后的坐标。如果发现重绘时旧图形没清干净先检查 clearRect 的参数是不是在变换后的坐标系里算的。5.2 用 SVG 路径做无级缩放避免 Canvas 重绘如果心形不需要逐帧动画只是静态展示或简单缩放SVG 比 Canvas 更合适。把采样点转成 SVG 的path的d属性浏览器会自动处理缩放和抗锯齿不用自己算 DPR。function heartToSVGPath(a, N) { let d ; for (let i 0; i N; i) { const theta (i / N) * 2 * Math.PI; const r a * (1 - Math.sin(theta)); const x r * Math.cos(theta); const y r * Math.sin(theta); d (i 0 ? M : L) x.toFixed(2) , y.toFixed(2); } return d Z; }注意toFixed(2)会损失一点精度但 SVG 路径点数多的时候两位小数足够还能减小文件体积。如果发现缩放后边缘有锯齿把精度提到 3 位或者直接用shape-renderinggeometricPrecision。5.3 验证绘制正确性的三个检查点画完之后怎么确认没翻车我一般做三个检查第一尖角位置对不对用鼠标或代码取尖角附近的坐标看是不是在预期方向第二左右对称性取 θ 和 2π - θ 两个点x 应该相同、y 应该相反第三面积或周长和理论值对比心形线围成的面积是(3πa²)/2用数值积分算一下误差在 1% 以内说明采样和转换都没问题。这三个检查里对称性检查最快写两行代码就能验证。面积检查适合在换渲染后端或者改采样策略之后做回归。尖角检查最直观肉眼就能看出来但容易被「看起来差不多」骗过去建议还是用坐标验证。我自己在这上面踩过的坑是有一次为了省事把 θ 的范围写成 0 到 π结果只画了半个心还以为是方程错了查了半天才发现是循环边界写错。从那以后我养成了一个习惯——任何极坐标绘图先把 θ 的完整范围和采样点数打印出来确认覆盖 2π 再往下写。希望帮到你。本文还有配套的精品资源点击获取