当前位置：首页 → 问答吧 → 笛卡尔情书的秘密——心形函数的绘制

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

时间：2010-10-18

来源：互联网

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有请测试)请惭愧去吧</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方法，绘制各种曲线图形也不在话下，但那并不是通过心形函数本身绘制的。)
关于心形线的一些资料

作者: ONEBOYS 发布时间: 2010-10-18

很浪漫

作者: silentcontrol 发布时间: 2010-10-19

既然加分了，那就再绘制几种图形。
其实极坐标是很利于绘制图形的。

那篇浪漫的文章最后提到了玫瑰线，可以使用如下公式：r(θ) = a sin kθ （k值改变，有不同变化）

<!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>
提示：您可以先修改部分代码再运行

下面这个是阿基米德螺线：r(θ) = a+bθ

<!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>
提示：您可以先修改部分代码再运行

作者: ONEBOYS 发布时间: 2010-10-19

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

热门阅读

热门下载