本文来自：http://www.iteye.com/topic/907069
r=a(1-sin) )。
据说这是笛卡尔死前发送的最后一封情书的内容。
这里面隐藏着刻骨铭心的秘密。
我一辈子都在等能手绘这个函数的人
使用canvas的arc方法绘制此函数如下：
！ doctypehtmlhtmlheadmetacharset=' utf-8 '/titlecardioid/title/headbodycanvasid=' pad ' width=' 800 ' height=' 5500 I=r=100(1-sin) '此网站/a/canvas script type=' text/JavaScript ' var $ id=function ) n ) return document.geted varcon=$id('pad ) ).getcontext ) ) 2d )； con.fill style=' # f00 ' con.translate (300，100 )； function draw () { var r=0，a=100，开始=0，结束=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 (； } /script /body /html
您也可以使用bezierCurveTo方法绘制各种曲线图元，但它们不是由心形函数本身绘制的。
关于心形的一些资料
顺便说一下，极坐标公式对绘制图形非常方便。
例如散线公式： r()=a sin k
阿基米德螺线公式： r()=a b
可以绘制如下：
！ doctypehtmlhtmlheadmetacharset=' utf-8 '/title rose/title/headbodycanvasid=' pad ' width=' 800 ' height=' 500 ' 请在ie较低版本的用户感到尴尬的情况下进行ie9/canvas script type=' text/JavaScript ' var $ id=function (n ) { return document . }window.addeventlistener('load '，draw，false )； varcon=$id('pad ) ).getcontext ) ) 2d )； con.stroke style=' # a00 ' con.translate (300，100 )； function draw ()、{ 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 ) start ) ) /玫瑰线公式r ))=asinkcon.arc (0，0，r，start，end，false )； } con.stroke (； } /script /body /html
！ doctypehtmlhtmlheadmetacharset=' utf-8 '/titlearchimedeanspiral/title/headbodycanvasid=' pad ' width=' 800 ' height=' 500 ' a href=' http://www.cssass.com ' cssass.com/a是ie较低版本的JavaScript'var$id=function(n ) { return document.getelementbyid (|n； }window.addeventlistener('load '，draw，false )； varcon=$id('pad ) ).getcontext ) ) 2d )； con.stroke style=' # a00 ' con.translate (300，100 )； function draw () { var r=0，a=20，开始=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 (； } /script /body /html
另外，由于审美的需要，我们的心形图形容易变成这样：
17(x ) 2y )2)-16*abs(x ) x ) *y=225
但是，这里使用的坐标系是直角坐标系，需要转换为极坐标方程式。 如下所示。
r=sqrt(225/) 17-16 sin* sqrt (cos) ^2) )
最后，是我们的canvas大显身手的时候了：
！ doctypehtmlhtmlheadmetacharset=' utf-8 '/title love/title/headbodycanvasid=' pad ' width=' 800 ' height=' 500 ' 请在ie较低版本的用户感到尴尬的情况下进行ie9/canvas script type=' text/JavaScript ' var $ id=function (n ) { return document . }window.addeventlistener('load '，draw，false )； varcon=$id('pad ) ).getcontext ) ) 2d )； con.fill style=' # f00 ' con.translate (300，100 )； function draw () { var r=0，a=20，开始=0，结束=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 ) ) } coco } /script /body /html