笛卡尔秘密——心形函数的绘图
本文来自：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.wolfram alpha.com/input/I=r=100 (1- sin) '
此网站
var$id=function(n ) {
return document.getelementbyid|| n；
}
window.addeventlistener('load '，draw，false )；
varcon=$id('pad ) ).getcontext ) ) 2d )；
con.fillStyle='#f00 '
con.translate (300，100 )；
功能绘制
var r=0，a=100，start=0，end=0；
con.rotate(math.pi；
for(varq=0； q500； 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
萝丝
href=' http://www.cssass.com ' cssass.com
注意： ie低版本的用户请含羞进行。 ie9可能需要更新
var$id=function(n ) {
return document.getelementbyid|| n；
}
window.addeventlistener('load '，draw，false )；
varcon=$id('pad ) ).getcontext ) ) 2d )；
con.strokeStyle='#a00 '
con.translate (300，100 )；
功能绘制
var r=0，a=100，start=0，end=0，k=4； 可以试着改变//K值
for(varq=0； q500； 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；
}
window.addeventlistener('load '，draw，false )；
varcon=$id('pad ) ).getcontext ) ) 2d )；
con.strokeStyle='#a00 '
con.translate (300，100 )；
功能绘制
var r=0，a=20，start=0，end=0，k=2；
for(varq=0； q500； 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 ) 2y )2)-16*abs(x ) x ) *y=225
但是，这里使用的坐标系是直角坐标系，需要转换为极坐标方程式。 如下所示。
r=sqrt(225/) 17-16 sin* sqrt (cos) ^2) )
最后，是我们的canvas大显身手的时候了：
/p
html
爱情
href=' http://www.cssass.com ' cssass.com
注意： ie低版本的用户请含羞进行。 ie9可能需要更新
var$id=function(n ) {
return document.getelementbyid|| n；
}
window.addeventlistener('load '，draw，false )；
varcon=$id('pad ) ).getcontext ) ) 2d )；
con.fillStyle='#f00 '
con.translate (300，100 )；
功能绘制
var r=0，a=20，start=0，end=0；
con.rotate(math.pi；
for(varq=0； q1000； 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 (；
}