html5笛卡爾心形曲線的實(shí)現(xiàn)
我要評論1650年，斯德哥爾摩的街頭，52歲的笛卡爾邂逅了18歲的瑞典公主克里斯汀。
那時(shí)，落魄、一文不名的笛卡爾過著乞討的生活，全部的財(cái)產(chǎn)只有身上穿的破破爛爛的衣服和隨身所帶的幾本數(shù)學(xué)書籍。生性清高的笛卡爾從來不開口請求路人施舍，他只是默默地低頭在紙上寫寫畫畫，潛心于他的數(shù)學(xué)世界。
一個(gè)寧靜的午后，笛卡爾照例坐在街頭，沐浴在陽光中研究數(shù)學(xué)問題。他如此沉溺于數(shù)學(xué)世界，身邊過往的人群，喧鬧的車馬隊(duì)伍。都無法對他造成干擾。
突然，有人來到他旁邊，拍了拍他的肩膀，“你在干什么呢？”扭過頭，笛卡爾看到一張年輕秀麗的瞼龐，一雙清澈的眼睛如湛藍(lán)的湖水，楚楚動人，長長的睫毛一眨一眨的，期待著他的回應(yīng)。她就是瑞典的小公主，國王最寵愛的女兒克里斯汀。
她蹲下身，拿過笛卡爾的數(shù)學(xué)書和草稿紙，和他交談起來。言談中，他發(fā)現(xiàn)，這個(gè)小女孩思維敏捷，對數(shù)學(xué)有著濃厚的興趣。
和女孩道別后，笛卡爾漸漸忘卻了這件事，依舊每天坐在街頭寫寫畫畫。
幾天后，他意外地接到通知，國王聘請他做小公主的數(shù)學(xué)老師。滿心疑惑的笛卡爾跟隨前來通知的侍衛(wèi)一起來到皇宮，在會客廳等候的時(shí)候，他聽到了從遠(yuǎn)處傳來的銀鈴般的笑聲。轉(zhuǎn)過身，他看到了前兒天在街頭偶遇的女孩子?；琶χ?，他趕緊低頭行禮。
從此，他當(dāng)上了公主的數(shù)學(xué)老師。
公主的數(shù)學(xué)在笛卡爾的悉心指導(dǎo)下突飛猛進(jìn)，他們之間也開始變得親密起來。笛卡爾向她介紹了他研究的新領(lǐng)域——直角坐標(biāo)系。通過它，代數(shù)與幾何可以結(jié)合起來，也就是日后笛卡爾創(chuàng)立的解析幾何學(xué)的雛形。
在笛卡爾的帶領(lǐng)下，克里斯汀走進(jìn)了奇妙的坐標(biāo)世界，她對曲線著了迷。每天的形影不離也使他們彼此產(chǎn)生了愛慕之心。
在瑞典這個(gè)浪漫的國度里，一段純粹、美好的愛情悄然萌發(fā)。
然而，沒過多久，他們的戀情傳到了國王的耳朵里。國王大怒，下令馬上將笛卡爾處死。在克里斯汀的苦苦哀求下，國王將他放逐回國，公主被軟禁在宮中。
當(dāng)時(shí)，歐洲大陸正在流行黑死病。身體孱弱的笛卡爾回到法國后不久，便染上重病。在生命進(jìn)入倒計(jì)時(shí)的那段日子，他日夜思念的還是街頭偶遇的那張溫暖的笑臉。他每天堅(jiān)持給她寫信，盼望著她的回音。然而，這些信都被國王攔截下來，公主一直沒有收到他的任何消息。
在笛卡爾給克里斯汀寄出第十三封信后，他永遠(yuǎn)地離開了這個(gè)世界。此時(shí)，被軟禁在宮中的小公主依然徘徊在皇宮的走廊里，思念著遠(yuǎn)方的情人。
這最后一封信上沒有寫一句話，只有一個(gè)方程：r=a(1-sinθ)。
國王看不懂，以為這個(gè)方程里隱藏著兩個(gè)人不可告人的秘密，便把全城的數(shù)學(xué)家召集到皇宮，但是沒有人能解開這個(gè)函數(shù)式。他不忍看著心愛的女兒每天悶悶不 樂，便把這封信給了她。拿到信的克里斯汀欣喜若狂，她立即明白了戀人的意圖，找來紙和筆，著手把方程圖形畫了出來，一顆心形圖案出現(xiàn)在眼前，克里斯汀不禁 流下感動的淚水，這條曲線就是著名的“心形線”。
國王去世后，克里斯汀繼承王位，登基后，她便立刻派人去法國尋找心上人的下落，收到的卻是笛卡爾去世的消息，留下了一個(gè)永遠(yuǎn)的遺憾……
這封享譽(yù)世界的另類情書，至今，還保存在歐洲笛卡爾的紀(jì)念館里。
<!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'>你不換一個(gè)瀏覽器，比如chrome，將無法知道這個(gè)秘密。</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)); //心形極坐標(biāo)表示法
con.arc(0, 0, r, start, end, false);
}
con.fill();
}
</script>
</body>
</html>
<html>
<head>
<meta charset='UTF-8' />
<title>LOVE</title>
</head>
<body style="text-align:center;">
<canvas id="pad" width='300' height='500'>提醒您：ie低版本用戶請更新你的瀏覽器</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(100, 100);
function draw() {
var r = 0,
a = 20,
start = 0,
end = 0;
con.rotate(Math.PI);
for (var q = 0; q < 1000; q++) {
start += Math.PI * 2 / 1000;
end = start + Math.PI * 2 / 1000;
r = a * Math.sqrt(225 / (17 - 16 * Math.sin(start) * Math.sqrt(Math.cos(start) * Math.cos(start))))
con.arc(0, 0, r, start, end, false);
}
con.fill();
}
</script>
</body>
</html>
到此這篇關(guān)于html5笛卡爾心形曲線的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)html5笛卡爾心形曲線內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了CSS心形加載的動畫源碼的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)2020-08-10
這篇文章主要介紹了CSS畫心形的三種方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2019-08-05HTML5 Canvas實(shí)現(xiàn)玫瑰曲線和心形圖案的代碼實(shí)例
這篇文章主要介紹了HTML5 Canvas實(shí)現(xiàn)玫瑰曲線和心形圖案的代碼實(shí)例,需要的朋友可以參考下2014-04-10
