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

fuanyu

浏览: 503387 次
性别:
来自: 广州

最近访客更多访客>>

u012321412

scotttom020

bxmingche

JevonZhang8

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

IE JavaScript HTML

本文来自: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>

分享到：

一个公网IP的80端口可以映射到多个服务器 | 如何构建优秀的团队？

2011-02-18 11:53
浏览 5455
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论