说明
写这篇文章是因为某天看到这样一个公式 r=a(1-cosθ) ，我上网搜了下，原来是笛卡尔心形线的极坐标方程，这个方程里面的确有一个浪漫又悲情的爱情故事，感兴趣的朋友可以点这里看看，而至于这个故事是真是假，这 并不重要。
而这篇文章的目的是要用前端的方式，画出笛卡尔心形线。
本来我想，这么经典的公式，网上应该已经有人实现过了吧。
我搜了搜，不得不佩服网友们，有 Java 实现的，有 C# 实现的，也有 canvas 实现的，还能用 ECharts 画 ，可以学习学习。
好的，开始正文！
先来了解下心形线
心形线，是一个圆上的固定一点在它绕着与其相切且半径相同的另外一个圆周滚动时所形成的轨迹，因其形状像心形而得名。
因为 canvas 是直角坐标系的，所以先来看
平面直角坐标系 画法
先贴出网上搜来的 心形线的平面直角坐标系方程表达式
分别为 x^2+y^2+a*x=a*sqrt(x^2+y^2) 和 x^2+y^2-a*x=a*sqrt(x^2+y^2
为什么会有两个方程表达式？
因为心形线的水平方向 和 垂直方向 对应的方程表达式不同，而用相同的方程表达式画的心形线，把每个点的 x 坐标和 y 坐标交换下，又会改变方向，所以会有两个方程表达式。
好了，开始画吧，看看这位朋友的做法
思路
根据方程表达式得到所有点的坐标，然后把每个点连接起来，然后填充，最后就行成一个心形了。
参数方程
x=a*(2*sin(t)+sin(2*t))
y=a*(2*cos(t)+cos(2*t))
x，y 分别表示一个点的 x 坐标 和 y 坐标，
a：是一个常数，用来控制心形的大小，
t ：代表 弧度
t 的取值范围：-pi<=t<=pi 或 0<=t<=2*pi
代码
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/hz/133332.html