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

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

r=a(1-sinθ)
据说这是笛卡尔死前寄出的最后一封情书的内容,
这里面隐藏着一个刻骨铭心的秘密。。。
一生只为等待能手绘这个函数给我的人

借助canvas的arc方法,将此函数绘制如下:

<!doctype html> <html> <head> <meta charset='UTF-8' /> <title>Cardioid</title> </head> <body> <canvas id="pad" width='800' height='500'><a href='http://www.cssass.com'>cssass.com</a>提醒您:ie低版本用户请一边惭愧去 吧,ie9可能需刷新。或者你试试访问<a href='http://www.wolframalpha.com/input/?i=r%3D100%281-sin%CE%B8%29'> 这个网站</a></canvas> <script type="text/javascript"> 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(); } </script> </body> </html>

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

话说,极坐标公式是非常利于绘制图形的。
比如玫瑰线公式:r(θ) = a sin kθ
阿基米德螺线公式:r(θ) = a+bθ
都可以绘制如下:

<!doctype html> <html> <head> <meta charset='UTF-8' /> <title>Rose</title> </head> <body> <canvas id="pad" width='800' height='500'><a href='http://www.cssass.com'>cssass.com</a>提醒您:ie低版本用户请一边惭愧去 吧,ie9可能需刷新</canvas> <script type="text/javascript"> 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(); } </script> </body> </html>

<!doctype html> <html> <head> <meta charset='UTF-8' /> <title>Archimedean spiral</title> </head> <body> <canvas id="pad" width='800' height='500'><a href='http://www.cssass.com'>cssass.com</a>提醒您:ie低版本用户请一边惭愧去 吧,ie9可能需刷新</canvas> <script type="text/javascript"> 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(); } </script> </body> </html>

另外,出于审美需求,我们的心型图形往往是这样的:
17(x^2+y^2)-16*abs(x)*y=225
但是这里所用到的坐标系是直角坐标系,我们需转换成极坐标方程,如下:
r=sqrt(225/(17-16sinθ*sqrt((cosθ)^2)))
最后,是我们的canvas大显身手的时候了:

<!doctype html> <html> <head> <meta charset='UTF-8' /> <title>LOVE</title> </head> <body> <canvas id="pad" width='800' height='500'><a href='http://www.cssass.com'>cssass.com</a>提醒您:ie低版本用户请一边惭愧去 吧,ie9可能需刷新</canvas> <script type="text/javascript"> 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(); } </script> </body> </html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值