1650年，斯德哥爾摩的街頭，52歲的笛卡爾邂逅了18歲的瑞典公主克里斯汀。
那時，落魄、一文不名的笛卡爾過着乞討的生活，全部的財產只有身上穿的破破爛爛的衣服和隨身所帶的幾本數學書籍。生性清高的笛卡爾從來不開口請求路人施舍，他只是默默地低頭在紙上寫寫畫畫，潛心於他的數學世界。
一個寧靜的午后，笛卡爾照例坐在街頭，沐浴在陽光中研究數學問題。他如此沉溺於數學世界，身邊過往的人群，喧鬧的車馬隊伍。都無法對他造成干擾。
突然，有人來到他旁邊，拍了拍他的肩膀，“你在干什么呢？”扭過頭，笛卡爾看到一張年輕秀麗的瞼龐，一雙清澈的眼睛如湛藍的湖水，楚楚動人，長長的睫毛一眨一眨的，期待着他的回應。她就是瑞典的小公主，國王最寵愛的女兒克里斯汀。
她蹲下身，拿過笛卡爾的數學書和草稿紙，和他交談起來。言談中，他發現，這個小女孩思維敏捷，對數學有着濃厚的興趣。
和女孩道別后，笛卡爾漸漸忘卻了這件事，依舊每天坐在街頭寫寫畫畫。
幾天后，他意外地接到通知，國王聘請他做小公主的數學老師。滿心疑惑的笛卡爾跟隨前來通知的侍衛一起來到皇宮，在會客廳等候的時候，他聽到了從遠處傳來的銀鈴般的笑聲。轉過身，他看到了前兒天在街頭偶遇的女孩子。慌忙中，他趕緊低頭行禮。
從此，他當上了公主的數學老師。
公主的數學在笛卡爾的悉心指導下突飛猛進，他們之間也開始變得親密起來。笛卡爾向她介紹了他研究的新領域——直角坐標系。通過它，代數與幾何可以結合起來，也就是日后笛卡爾創立的解析幾何學的雛形。
在笛卡爾的帶領下，克里斯汀走進了奇妙的坐標世界，她對曲線着了迷。每天的形影不離也使他們彼此產生了愛慕之心。
在瑞典這個浪漫的國度里，一段純粹、美好的愛情悄然萌發。
然而，沒過多久，他們的戀情傳到了國王的耳朵里。國王大怒，下令馬上將笛卡爾處死。在克里斯汀的苦苦哀求下，國王將他放逐回國，公主被軟禁在宮中。
當時，歐洲大陸正在流行黑死病。身體孱弱的笛卡爾回到法國后不久，便染上重病。在生命進入倒計時的那段日子，他日夜思念的還是街頭偶遇的那張溫暖的笑臉。他每天堅持給她寫信，盼望着她的回音。然而，這些信都被國王攔截下來，公主一直沒有收到他的任何消息。
在笛卡爾給克里斯汀寄出第十三封信后，他永遠地離開了這個世界。此時，被軟禁在宮中的小公主依然徘徊在皇宮的走廊里，思念着遠方的情人。
這最后一封信上沒有寫一句話，只有一個方程：r=a(1-sinθ)。
國王看不懂，以為這個方程里隱藏着兩個人不可告人的秘密，便把全城的數學家召集到皇宮，但是沒有人能解開這個函數式。他不忍看着心愛的女兒每天悶悶不 樂，便把這封信給了她。拿到信的克里斯汀欣喜若狂，她立即明白了戀人的意圖，找來紙和筆，着手把方程圖形畫了出來，一顆心形圖案出現在眼前，克里斯汀不禁 流下感動的淚水，這條曲線就是著名的“心形線”。
國王去世后，克里斯汀繼承王位，登基后，她便立刻派人去法國尋找心上人的下落，收到的卻是笛卡爾去世的消息，留下了一個永遠的遺憾……
這封享譽世界的另類情書，至今，還保存在歐洲笛卡爾的紀念館里。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--<noscript>r = a(1-sin"theta")</noscript>-->
<canvas id="cardioid" width="600" height="600" style="background: lightblue"> 您的瀏覽器不支持canvas！ </canvas>
<script>
var cr = document.getElementById("cardioid"); var W = cr.width/2, H = cr.height/3, R = 150; var c = cr.getContext("2d"); var G = 360, g = 0, T = Math.PI*2, t = T/G;
c.save(); c.translate(W, H); c.rotate(-T/4);
//c.fillStyle = "red";
while(g < G){ c.save();//c.translate(W, H);
c.rotate(g*t); c.beginPath(); c.arc(0, -R*(1-Math.sin(++g*t)), 13, 0, 360, false); c.closePath(); c.fill(); c.restore(); } c.restore(); g = 0; (function draw(){ if(g < G){ c.save(); c.translate(W, H); c.rotate(-T/4 + g*t);
c.fillStyle = "red"; c.beginPath(); c.arc(0, -R*(1-Math.sin(++g*t)), 5, 0, 360, false); c.closePath(); c.fill(); c.restore(); } setTimeout(draw, 1); })(); </script>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset='UTF-8' />
<title>Cardioid</title>
</head>
<body style="text-align:center;">
<canvas id="pad" width='500' height='500'>你不換一個瀏覽器，比如chrome，將無法知道這個秘密。</a>
</canvas>
<script type="text/javascript">
var $id = function(n) { return document.getElementById(n) || n; } window.addEventListener("load", draw, false); var con = $id("pad").getContext('2d'); con.fillStyle = '#e21f27' con.translate(200, 100); function draw() { var r = 0, a = 100, start = 0, end = 0; con.rotate(Math.PI); for (var q = 0; q < 500; q++) { start += Math.PI * 2 / 500; end = start + Math.PI * 2 / 500; r = a * (1 - Math.sin(start)); //心形極坐標表示法
con.arc(0, 0, r, start, end, false); } con.fill(); } </script>
</body>
</html>
1 <html>
2 <head>
3 <meta charset='UTF-8' />
4 <title>LOVE</title>
5 </head>
6 <body style="text-align:center;">
7 <canvas id="pad" width='300' height='500'>提醒您：ie低版本用戶請更新你的瀏覽器</canvas>
8 <script type="text/javascript">
9 var $id = function(n) { 10 return document.getElementById(n) || n; 11 } 12 window.addEventListener("load", draw, false); 13 var con = $id("pad").getContext('2d'); 14 con.fillStyle = '#e21f27'
15 con.translate(100, 100); 16
17 function draw() { 18 var r = 0, 19 a = 20, 20 start = 0, 21 end = 0; 22 con.rotate(Math.PI); 23 for (var q = 0; q < 1000; q++) { 24 start += Math.PI * 2 / 1000; 25 end = start + Math.PI * 2 / 1000; 26 r = a * Math.sqrt(225 / (17 - 16 * Math.sin(start) * Math.sqrt(Math.cos(start) * Math.cos(start)))) 27 con.arc(0, 0, r, start, end, false); 28 } 29 con.fill(); 30 } 31 </script>
32 </body>
33 </html>