笛卡尔情书的秘密——心形函数的绘制
本文来自:http://www.iteye.com/topic/907069
r=a(1-sinθ)
据说这是笛卡尔死前寄出的最后一封情书的内容,
这里面隐藏着一个刻骨铭心的秘密。。。
一生只为等待能手绘这个函数给我的人
借助canvas的arc方法,将此函数绘制如下:
/p>
html>
Cardioidhref='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>
Rosehref='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 spiralhref='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>
LOVEhref='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();
}