大家好，小活来为大家解答以上问题。笛卡尔心形函数图像解析式推导，笛卡尔心形函数图像很多人还不知道，现在让我们一起来看看吧！

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、 }

本文到此结束，希望对大家有所帮助。