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

最新推荐文章于 2024-02-15 22:18:35 发布

fuanyu163

最新推荐文章于 2024-02-15 22:18:35 发布

阅读量3.4k

点赞数

分类专栏： js 文章标签： IE JavaScript HTML ViewUI

本文链接：https://blog.csdn.net/fuanyu163/article/details/83841694

版权

js 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

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