心形曲线函数表达式（心形曲线）

大家好，小活来为大家解答以上问题。心形曲线函数表达式，心形曲线很多人还不知道，现在让我们一起来看看吧！

1、先使用html定义一个<canvas>标签

2、js绘制canvas图形

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

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

免责声明：本文由用户上传，如有侵权请联系删除！