笛卡尔情书的秘密——心形函数的绘制

本文来自:http://www.iteye.com/topic/907069

r=a(1-sinθ)

据说这是笛卡尔死前寄出的最后一封情书的内容，

这里面隐藏着一个刻骨铭心的秘密。。。

一生只为等待能手绘这个函数给我的人

借助canvas的arc方法，将此函数绘制如下：

/p>

html>

Cardioid

href='http://www.cssass.com'>cssass.com

提醒您：ie低版本用户请一边惭愧去

吧，ie9可能需刷新。或者你试试访问

href='http://www.wolframalpha.com/input/?i=r%3D100%281-sin%CE%B8%29'>

这个网站

var $id=function(n){

return document.getElementById(n) || n;

}

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

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

con.fillStyle='#f00'

con.translate(300,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();

}

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

关于心形线的一些资料

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

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

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

都可以绘制如下：

/p>

html>

Rose

href='http://www.cssass.com'>cssass.com

提醒您：ie低版本用户请一边惭愧去

吧，ie9可能需刷新

var $id=function(n){

return document.getElementById(n) || n;

}

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

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

con.strokeStyle='#a00'

con.translate(300,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();

}

/p>

html>

Archimedean spiral

href='http://www.cssass.com'>cssass.com

提醒您：ie低版本用户请一边惭愧去

吧，ie9可能需刷新

var $id=function(n){

return document.getElementById(n) || n;

}

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

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

con.strokeStyle='#a00'

con.translate(300,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();

}

另外，出于审美需求，我们的心型图形往往是这样的：

17(x^2+y^2)-16*abs(x)*y=225

但是这里所用到的坐标系是直角坐标系，我们需转换成极坐标方程，如下：

r=sqrt(225/(17-16sinθ*sqrt((cosθ)^2)))

最后，是我们的canvas大显身手的时候了：

/p>

html>

LOVE

href='http://www.cssass.com'>cssass.com

提醒您：ie低版本用户请一边惭愧去

吧，ie9可能需刷新

var $id=function(n){

return document.getElementById(n) || n;

}

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

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

con.fillStyle='#f00'

con.translate(300,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();

}