你们好，最近小活发现有诸多的小伙伴们对于笛卡尔心形线公式图像，笛卡尔心形线这个问题都颇为感兴趣的，今天小活为大家梳理了下，一起往下看看吧。
1、 首先使用html定义一个画布标签。
2、 Js绘制画布图形
3、 script
4、 var cr=document.getElementById('cardioid');
5、 var W=cr.width/2, H=cr.height/3, R=150;
6、 var c=cr.getContext('2d'); var G=360, g=0, T=Math.PI*2, t=T/G;
7、 c.save(); c.translate(W, H);c.rotate(-T/4);
8、 //c.fillStyle='red';
9、 while(g G){
10、 c.save();//c.translate(W, H);c.rotate(g*t);c.beginPath();c.arc(0, -R*(1-Math.sin(++g*t)), 13, 0, 360, false);c.closePath();c.fill();c.restore();
11、 }
12、 c.restore(); g=0;
13、 (function draw(){
14、 if(g G){ c.save(); c.translate(W, H); c.rotate(-T/4 + g*t);c.fillStyle='red';c.beginPath();c.arc(0, -R*(1-Math.sin(++g*t)), 5, 0, 360, false); c.closePath(); c.fill(); c.restore();
15、 } setTimeout(draw, 1);
16、 })();
17、 /script
18、 绘制完整的圆心类型
19、 var $id=function(n) {
20、 return document.getElementById(n) || n;
21、 }window.addEventListener('load', draw, false);
22、 var con=$id('pad').getContext('2d');
23、 con.fillStyle='#e21f27'
24、 con.translate(200, 100);
25、 function draw() {
26、 var r=0,a=100,start=0,end=0;con.rotate(Math.PI);
27、 for (var q=0; q 500; q++) {
28、 start +=Math.PI * 2/500;
29、 end=start + Math.PI * 2/500;
30、 r=a *(1-math . sin(start))；//心形极坐标表示
31、 con.arc(0, 0, r, start, end, false);
32、 }
33、 con.fill();
34、 }
35、 var $id=function(n) {
36、 return document.getElementById(n) || n;
37、 }
38、 window.addEventListener('load', draw, false);
39、 var con=$id('pad').getContext('2d');
40、 con.fillStyle='#e21f27'
41、 con.translate(100, 100);
42、 function draw() {
43、 var r=0,a=20,
44、 start=0,end=0;
45、 con.rotate(Math.PI);
46、 for (var q=0; q 1000; q++) {
47、 start +=Math.PI * 2/1000;
48、 end=start + Math.PI * 2/1000;
49、 r=a * Math.sqrt(225/(17 - 16 * Math.sin(start) * Math.sqrt(Math.cos(start) * Math.cos(start))))
50、 con.arc(0, 0, r, start, end, false);
51、 }
52、 con.fill();
53、 }
以上就是笛卡尔心形线这篇文章的一些介绍，希望对大家有所帮助。
标签：
免责声明：本文由用户上传，如有侵权请联系删除！