一个浪漫又悲情的爱情故事——笛卡尔心形线

haobowd 发布于2019-08-26 17:35 / 3477人阅读

摘要：而这篇文章的目的是要用前端的方式，画出笛卡尔心形线。根据这个参数方程，用上面说的平面直角坐标系的画法，把代码里的方程换一下，就可以画出这样的心形。

说明

写这篇文章是因为某天看到这样一个公式 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

代码

效果图

平面直角坐标系画法（空心心形）

上面的代码是画一个实心的心形，当然我们也可以画空心的，只需要做出一点点的修改就可以。
我们只需要改改 draw( ) 函数就好，把原来的 fill( ) 方法，改为 stroke( ) 方法，并且把 strokeStyle 设置了颜色就行了。

function draw(){
    //context.fillStyle="#c00";
    context.strokeStyle="#c00";
    // 把每个点连接起来
    for(var i=1;i

极坐标系画法
极坐标系是这样的  

极坐标系中确定一个点的位置，靠的是极点（图中点O），和 角度 来确定的。  
更多关于极坐标系的知识，可以看看这里
看看这位朋友的做法
思路 
根据极坐标方程 r=a(1+sinθ) ，得到 r ，以 r 作为半径，根据 r 连续的去画圆弧，画完一圈后，心形就出来了。  
心形线 极坐标方程
r=a(1+sinθ) 
代码




  



  

  


效果图  

极坐标系 画法  （空心心形）
用极坐标系 画法，画空心心形，也是一样的需要改改 draw( )  函数，把原来的  fill( )  方法，改为 stroke( ) 方法，并且把 strokeStyle  设置了颜色就行了。
function draw() {
  var r = 0;
  var start = 0;
  var end = 0;
  var a = 100;

  //context.fillStyle = "#e21f27";
  context.strokeStyle = "#e21f27";
  for (var i = 0; i < 500; i++) {
    start += Math.PI * 2 / 500;
    end = start + Math.PI * 2 / 500;
    r = a * (1 + Math.sin(start)); 
    context.arc(0, 0, r, start, end, false);
  }
  //context.fill();
  // 改用 stroke() 方法
  context.stroke();   
}

可能你会觉得这样的心形并不好看。   
看看这个参数方程吧！
x=16 * (sin(t)) ^ 3;
y=13 * cos(t) - 5 * cos(2 * t) - 2 * cos(3 * t) - cos(4 * t)。
根据这个参数方程，用上面说的平面直角坐标系的画法，把代码里的方程换一下，就可以画出这样的心形。

代码


 
  
 
 
    

    
 

也许我们还可以再做点什么，比如加点动画，看看下面这个吧。    

点这里下载源码，里面已经加了很详细的注释了。
总结
这篇文章主要是说用笛卡尔心形线方程画心形，但是想要画出心形的方式绝对是多种多样的，单纯的用CSS也可以，复杂点 用贝塞尔曲线也能画出来，大家不妨去试试，说不定又有什么新发现呢。

混合云专线服务心形线用c语言搞一个心形悲情浪漫主义

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110140.html

一个浪漫又悲情的爱情故事——笛卡尔心形线

摘要：而这篇文章的目的是要用前端的方式，画出笛卡尔心形线。根据这个参数方程，用上面说的平面直角坐标系的画法，把代码里的方程换一下，就可以画出这样的心形。说明写这篇文章是因为某天看到这样一个公式 r=a(1-cosθ) ，我上网搜了下，原来是笛卡尔心形线的极坐标方程，这个方程里面的确有一个浪漫又悲情的爱情故事，感兴趣的朋友可以点这里看看，而至于这个故事是真是假，这并不重要。而这篇文章的...

Rango 2019-08-29 15:41 评论0 收藏0
极客爱情: 情人节礼物大作战

摘要：故而总结如下编成的代码浪漫的环境亲手制作的礼物注意请将下面的程序员的情人节礼物换成语言。言归正传程序员的情人节礼物入门之材料构思情人节礼物之设备展示想着在这个移动盛行的时代，再用电脑就不太合适了。是时候应该反击了当我看到@鄢得諼草的那几篇黑我黑到体无完肤的#极客爱情# @Phodal 故事的时候，我发现我竟无言以对。或许，作为一名程序员，我们或多或少都有这样的共性。 ...

XGBCCC 2019-07-31 11:36 评论0 收藏0
途牛原创｜运营神器之高效的CMS

摘要：平均每月孵化个页面的全视角覆盖范围业务支持周年庆，旅游节，营销，专题，主题游，频道页涉及品类跟团，自助自驾门票当地酒店签证机票金融通信攻略玩法超级自由行下面请跟随大喇叭，一睹运营播种机的前世今生。发布，支持超级自由行模块配置。序人生短短几个秋，不醉不罢休。 CMS即将迎来2周岁生日，服务期间生产了＊2200＋＊个内容页面。（平均每月孵化100个页面） CMS的全视角：覆盖范围（...

txgcwm 2019-06-27 13:41 评论0 收藏0
途牛原创｜运营神器之高效的CMS

摘要：平均每月孵化个页面的全视角覆盖范围业务支持周年庆，旅游节，营销，专题，主题游，频道页涉及品类跟团，自助自驾门票当地酒店签证机票金融通信攻略玩法超级自由行下面请跟随大喇叭，一睹运营播种机的前世今生。发布，支持超级自由行模块配置。序人生短短几个秋，不醉不罢休。 CMS即将迎来2周岁生日，服务期间生产了＊2200＋＊个内容页面。（平均每月孵化100个页面） CMS的全视角：覆盖范围（...

Baoyuan 2019-06-24 17:48 评论0 收藏0
制作粉色少女系列❤生日快乐祝福网页❤（HTML+CSS+JS）

程序员爱情❤520/表白/七夕情人节/求婚❤专用html5+css3+js 生日快乐网站模板 HTML生日快乐祝福网页模板，该模板有多种动态效果图，全局采用蓝色装饰，适用于给女朋友的生日祝福，只需简单修改，即可用网页生成打开。戳下方链接↓查看线上演示地址 0.生日演示地址账号是 cyl 密码是 1007 1.生日快乐????(多页面html模板)★在线演示地址...

changfeng1050 2021-10-13 09:40 评论0 收藏0