r=a(1-sinθ)

据说这是笛卡尔死前寄出的最后一封情书的内容, 而这里面隐藏着一个刻骨铭心的秘密。。。

当时法国正流行黑死病，迪卡尔不得不逃离法国， 流浪到瑞典。

某天，他在市场乞讨，有一群少女经过， 其中一名少女发现他的口音不像是瑞典人，非常好奇，于是上前问他，

你从哪来的啊? 法国。

你是做什么的啊? 我是数学家。

这名少女叫克丽丝汀，１８岁，是一个公主，

她和其它女孩子不一样，并不喜欢文学，而是热衷于数学。

当她听到迪卡尔说明身份之后，感到相当大的兴趣，于是把迪卡尔邀请回宫。 迪卡尔就成了她的数学老师，将一生的研究倾囊相授给克丽丝汀。

而克丽丝汀的数学也日益进步，直角坐标当时也只有迪卡尔这对师生才懂。 后来，他们之间有了不一样的情愫，发生了喧腾一时的师生恋。

这件事传到国王耳中，让国王相当愤怒，下令将迪卡尔处死！克丽丝汀以自缢相逼， 国王害怕宝贝女儿真的会想不开， 于是将迪卡尔放逐回法国，并将克丽丝汀软禁。

迪卡尔一回到法国后，没多久就染上了黑死病，躺在床上奄奄一息。 迪卡尔不断地写信到瑞典给克丽丝汀，但却被国王给拦截没收， 所以克丽丝汀一直没收到迪卡尔的信。。。

在笛卡尔快要死去的时候，他寄出了第１３封信，  这封信的内容只有短短的一行：

r=a(1-sinθ)

国王拦截到这封信之后，拆开看发现并不是一如往常的情话。 国王当然看不懂这项数学式，于是找来城里所有科学家来研究， 但都没有人能够解开到底是什么意思。

国王心想反正迪卡尔就快要快死了，

而且公主被软禁时都闷闷不乐的，所以，就把信交给克丽丝汀。

当克丽丝汀收到这封信时，雀跃无比，她很高兴她的爱人还是在想念她的。

她立刻动手研究这行字的秘密。。。很快就解开了这个属于他们两个人之间秘密。

而我们将借助canvas的arc方法，为你揭开这行字的秘密：

Cardioid

你不换一个浏览器，比如chrome，将无法知道这个秘密。

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();

}

不久之后那位国王死了，克丽丝汀继承王位， 登基之后她马上派人在欧洲四处寻找迪卡尔的踪迹，可惜人已故。。。

除了使用arc方法，bezierCurveTo方法来绘制各种曲线图形也不在话下，但那并不是通过心形函数本身绘制的。

好吧其实r=a(1-sinθ)是极坐标系方程，而不是笛卡尔坐标系(直角坐标系)方程式。

关于心形函数的一些资料

话说，极坐标公式是非常利于绘制图形的。

比如玫瑰线公式：r(θ) = a sin kθ

阿基米德螺线公式：r(θ) = a+bθ

Rose

cssass.com提醒您：ie低版本用户请更新你的浏览器

var $id=function(n){

return document.getElementById(n) || n;

}

window.addEventListener("load",draw, false);

var con=$id("pad").getContext('2d');

con.strokeStyle='#e21f27'

con.translate(100,100);

function draw(){

var r=0 , a=100 , start = 0 , end= 0 , k=4; //可以改变k值试试

for(var q=0; q<500; q++){

start += Math.PI * 2 /500;

end = start + Math.PI * 2 /500;

r =Math.abs(a *(Math.cos( k * start))) //玫瑰线公式r(θ) = a sin kθ

con.arc(0,0,r,start,end,false);

}

con.stroke();

}

Archimedean spiral

cssass.com提醒您：ie低版本用户请更新你的浏览器

var $id=function(n){

return document.getElementById(n) || n;

}

window.addEventListener("load",draw, false);

var con=$id("pad").getContext('2d');

con.strokeStyle='#e21f27'

con.translate(100,100);

function draw(){

var r=0 , a=20 , start = 0 , end= 0 , k=2;

for(var q=0; q<500; q++){

start += Math.PI * 2 /100;

end = start + Math.PI * 2 /100;

r =a + k * start //阿基米德螺线

con.arc(0,0,r,start,end,false);

}

con.stroke();

}

LOVE

cssass.com提醒您：ie低版本用户请更新你的浏览器

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();

}

这篇文章发布于 2010年10月18号，星期一，16:19，归类于 HTML5。您可以跟踪这篇文章的评论通过 RSS 2.0 feed。

您可以留下评论，或者从您的站点trackback。