一個浪漫又悲情的愛情故事——笛卡爾心形線

haobowd 發布于2019-08-26 17:35 / 3730人閱讀

摘要：而這篇文章的目的是要用前端的方式，畫出笛卡爾心形線。根據這個參數方程，用上面說的平面直角坐標系的畫法，把代碼里的方程換一下，就可以畫出這樣的心形。

說明

寫這篇文章是因為某天看到這樣一個公式 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也可以，復雜點 用貝塞爾曲線也能畫出來，大家不妨去試試，說不定又有什么新發現呢。

云服務器 GPU云服務器心形線用c語言搞一個心形悲情浪漫主義

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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