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

haobowd 發(fā)布于2019-08-26 17:35 / 3806人閱讀

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

說明

寫這篇文章是因?yàn)槟程炜吹竭@樣一個(gè)公式 r=a(1-cosθ) ，我上網(wǎng)搜了下，原來是笛卡爾心形線的極坐標(biāo)方程，這個(gè)方程里面的確有一個(gè)浪漫又悲情的愛情故事，感興趣的朋友可以點(diǎn)這里看看，而至于這個(gè)故事是真是假，這并不重要。

而這篇文章的目的是要用前端的方式，畫出笛卡爾心形線。
本來我想，這么經(jīng)典的公式，網(wǎng)上應(yīng)該已經(jīng)有人實(shí)現(xiàn)過了吧。
我搜了搜，不得不佩服網(wǎng)友們，有 Java 實(shí)現(xiàn)的，有 C# 實(shí)現(xiàn)的，也有 canvas 實(shí)現(xiàn)的，還能用 ECharts 畫，可以學(xué)習(xí)學(xué)習(xí)。

好的，開始正文！
先來了解下心形線

心形線，是一個(gè)圓上的固定一點(diǎn)在它繞著與其相切且半徑相同的另外一個(gè)圓周滾動(dòng)時(shí)所形成的軌跡，因其形狀像心形而得名。

因?yàn)?canvas 是直角坐標(biāo)系的，所以先來看

平面直角坐標(biāo)系畫法

先貼出網(wǎng)上搜來的心形線的平面直角坐標(biāo)系方程表達(dá)式
分別為 x^2+y^2+a*x=a*sqrt(x^2+y^2) 和 x^2+y^2-a*x=a*sqrt(x^2+y^2

為什么會(huì)有兩個(gè)方程表達(dá)式？
因?yàn)樾男尉€的水平方向和垂直方向對(duì)應(yīng)的方程表達(dá)式不同，而用相同的方程表達(dá)式畫的心形線，把每個(gè)點(diǎn)的 x 坐標(biāo)和 y 坐標(biāo)交換下，又會(huì)改變方向，所以會(huì)有兩個(gè)方程表達(dá)式。

好了，開始畫吧，看看這位朋友的做法
思路
根據(jù)方程表達(dá)式得到所有點(diǎn)的坐標(biāo)，然后把每個(gè)點(diǎn)連接起來，然后填充，最后就行成一個(gè)心形了。

參數(shù)方程

x=a*(2*sin(t)+sin(2*t))
y=a*(2*cos(t)+cos(2*t))

x，y 分別表示一個(gè)點(diǎn)的 x 坐標(biāo) 和 y 坐標(biāo)，
a：是一個(gè)常數(shù)，用來控制心形的大小，
t ：代表弧度
t 的取值范圍：-pi<=t<=pi 或 0<=t<=2*pi

代碼

效果圖

平面直角坐標(biāo)系畫法（空心心形）

上面的代碼是畫一個(gè)實(shí)心的心形，當(dāng)然我們也可以畫空心的，只需要做出一點(diǎn)點(diǎn)的修改就可以。
我們只需要改改 draw( ) 函數(shù)就好，把原來的 fill( ) 方法，改為 stroke( ) 方法，并且把 strokeStyle 設(shè)置了顏色就行了。

function draw(){
    //context.fillStyle="#c00";
    context.strokeStyle="#c00";
    // 把每個(gè)點(diǎn)連接起來
    for(var i=1;i

極坐標(biāo)系畫法
極坐標(biāo)系是這樣的  

極坐標(biāo)系中確定一個(gè)點(diǎn)的位置，靠的是極點(diǎn)（圖中點(diǎn)O），和 角度 來確定的。  
更多關(guān)于極坐標(biāo)系的知識(shí)，可以看看這里
看看這位朋友的做法
思路 
根據(jù)極坐標(biāo)方程 r=a(1+sinθ) ，得到 r ，以 r 作為半徑，根據(jù) r 連續(xù)的去畫圓弧，畫完一圈后，心形就出來了。  
心形線 極坐標(biāo)方程
r=a(1+sinθ) 
代碼




  



  

  


效果圖  

極坐標(biāo)系 畫法  （空心心形）
用極坐標(biāo)系 畫法，畫空心心形，也是一樣的需要改改 draw( )  函數(shù)，把原來的  fill( )  方法，改為 stroke( ) 方法，并且把 strokeStyle  設(shè)置了顏色就行了。
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();   
}

可能你會(huì)覺得這樣的心形并不好看。   
看看這個(gè)參數(shù)方程吧！
x=16 * (sin(t)) ^ 3;
y=13 * cos(t) - 5 * cos(2 * t) - 2 * cos(3 * t) - cos(4 * t)。
根據(jù)這個(gè)參數(shù)方程，用上面說的平面直角坐標(biāo)系的畫法，把代碼里的方程換一下，就可以畫出這樣的心形。

代碼


 
  
 
 
    

    
 

也許我們還可以再做點(diǎn)什么，比如加點(diǎn)動(dòng)畫，看看下面這個(gè)吧。    

點(diǎn)這里下載源碼，里面已經(jīng)加了很詳細(xì)的注釋了。
總結(jié)
這篇文章主要是說用笛卡爾心形線方程畫心形，但是想要畫出心形的方式絕對(duì)是多種多樣的，單純的用CSS也可以，復(fù)雜點(diǎn) 用貝塞爾曲線也能畫出來，大家不妨去試試，說不定又有什么新發(fā)現(xiàn)呢。

云服務(wù)器 GPU云服務(wù)器心形線用c語言搞一個(gè)心形悲情浪漫主義

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/110140.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

haobowd

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

2020年技能樹

閱讀 2281·2021-09-07 09:58
利用angular4和nodejs-express構(gòu)建一個(gè)簡(jiǎn)單的網(wǎng)站（八）—注冊(cè)之保存用戶數(shù)據(jù)

閱讀 3470·2019-08-30 14:07
掀開圖片顯示介紹的css效果

閱讀 1352·2019-08-29 12:32
web移動(dòng)開發(fā)中如何實(shí)現(xiàn)圖標(biāo)點(diǎn)擊態(tài)的蒙層效果

閱讀 721·2019-08-29 11:06
用Class寫一個(gè)記住用戶離開位置的js插件

閱讀 3744·2019-08-26 18:18
一個(gè)浪漫又悲情的愛情故事——笛卡爾心形線

閱讀 3807·2019-08-26 17:35
常用前端知識(shí)積累

閱讀 1438·2019-08-26 11:35
頁面回退歷史記錄

閱讀 669·2019-08-26 11:35

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！

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

相關(guān)文章