七夕特辑之心形的线

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

马德里甜欣

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

阅读量563

点赞数

文章标签：算法

本文链接：https://blog.csdn.net/weixin_51564923/article/details/126166668

版权

讲真的，没有亲爱的ta，我单纯是想得一个七夕勋章。

心形线，是一个圆上的固定一点在它绕着与其相切且半径相同的另外一个圆周滚动时所形成的轨迹，因其形状像心形而得名。

平面直角坐标系画法

先贴出网上搜来的心形线的平面直角坐标系方程表达式分别为 x^2+y^2+a*x=a*sqrt(x^2+y^2) 和 x^2+y^2-a*x=a*sqrt(x^2+y^2

为什么会有两个方程表达式？因为心形线的水平方向和垂直方向对应的方程表达式不同，而用相同的方程表达式画的心形线，把每个点的 x 坐标和 y 坐标交换下，又会改变方向，所以会有两个方程表达式。

思路
根据方程表达式得到所有点的坐标，然后把每个点连接起来，然后填充，最后就行成一个心形了。

x=a*(2*sin(t)+sin(2*t))
y=a*(2*cos(t)+cos(2*t))

x，y 分别表示一个点的 x 坐标和 y 坐标，
a：是一个常数，用来控制心形的大小，
t ：代表弧度
t 的取值范围：-pi<=t<=pi 或 0<=t<=2*pi

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
 </head>
 <body>
    <canvas width="400" height="400"></canvas>

    <script>
        var canvas = document.querySelector('canvas');
        var context = canvas.getContext('2d');  
        context.lineWidth = 3;
        // 将画布的原点（0,0），移动到(200,200)
        // 移动原点是为了能让整个心形显示出来
        context.translate(200,200); 

        // t 代表弧度
        var t=0;
        // maxt 代表 t 的最大值
        var maxt = 2*Math.PI;
        // vt 代表 t 的增量
        var vt = 0.01;
        // 需要循环的次数
        var maxi = Math.ceil(maxt/vt);
        // 保存所有点的坐标的数组
        var pointArr=[];
        // x 用来暂时保存每次循环得到的 x 坐标
        var x=0;
        // y 用来暂时保存每次循环得到的 y 坐标
        var y=0;

        // 根据方程得到所有点的坐标
        for(var i=0;i<=maxi;i++){
            // x=a*(2*sin(t)+sin(2*t))
            x=50*(2*Math.sin(t)+Math.sin(2*t));

            // y=a*(2*cos(t)+cos(2*t))
            y=50*(2*Math.cos(t)+Math.cos(2*t));
            t+=vt;
            pointArr.push([x,y]); 
        }

        // 根据点的坐标，画出心形线
		context.moveTo(pointArr[0][0],pointArr[0][1]);
        draw();
        function draw(){
             context.fillStyle='#c00';
             // 把每个点连接起来
            for(var i=1;i<pointArr.length;i++){
                x = pointArr[i][0];
                y = pointArr[i][1];
                context.lineTo(x,y);
            }
            context.fill();
        }
    </script>
 </body>
</html>

平面直角坐标系画法（空心心形）

上面的代码是画一个实心的心形，当然我们也可以画空心的，只需要做出一点点的修改就可以。
我们只需要改改 draw( ) 函数就好，把原来的 fill( ) 方法，改为 stroke( ) 方法，并且把 strokeStyle 设置了颜色就行了。

function draw(){
     //context.fillStyle='#c00';
     context.strokeStyle='#c00';
     // 把每个点连接起来
    for(var i=1;i<pointArr.length;i++){
        x = pointArr[i][0];
        y = pointArr[i][1];
        context.lineTo(x,y);
    }
     //context.fill();
     context.stroke();
}

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
 </head>
 <body>
    <canvas width="400" height="400"></canvas>

	<script>
		var canvas = document.querySelector('canvas');
		var context = canvas.getContext('2d');  
		context.lineWidth = 3;
		// 将画布的原点（0,0），移动到(200,200)
		// 移动原点是为了能让整个心形显示出来
		context.translate(200,200); 

		// t 代表弧度
		var t=0;
		// vt 代表 t 的增量
		var vt = 0.01;
		// maxt 代表 t 的最大值
		var maxt = 2*Math.PI;
		// 需要循环的次数
		var maxi = Math.ceil(maxt/vt);
		// 保存所有点的坐标的数组
		var pointArr=[];
		// 控制心形大小
		var size = 10;
		// x 用来暂时保存每次循环得到的 x 坐标
		var x=0;
		// y 用来暂时保存每次循环得到的 y 坐标
		var y=0;

		// 根据方程得到所有点的坐标
		for(var i=0;i<=maxi;i++){
			// x=16 * (sin(t)) ^ 3;
			var x = 16 * Math.pow(Math.sin(t),3);
			// y=13 * cos(t) - 5 * cos(2 * t) - 2 * cos(3 * t) - cos(4 * t)
			var y = 13 * Math.cos(t) - 5 * Math.cos(2 * t) -2 * Math.cos(3 * t)- Math.cos(4 * t);
			t+=vt;
			pointArr.push([x*size,-y*size]); 
		}

		// 根据点的坐标，画出心形线
		context.moveTo(pointArr[0][0],pointArr[0][1]);
		draw();
		function draw(){
			context.fillStyle='#c00';
			// 把每个点连接起来
			for(var i=1;i<pointArr.length;i++){
				x = pointArr[i][0];
				y = pointArr[i][1];
				context.lineTo(x,y);
			}
			context.fill();
		}
	</script>
 </body>
</html>

马德里甜欣

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
七夕特辑之心形的线

为什么会有两个方程表达式？因为心形线的水平方向和垂直方向对应的方程表达式不同，而用相同的方程表达式画的心形线，把每个点的 x 坐标和 y 坐标交换下，又会改变方向，所以会有两个方程表达式。心形线，是一个圆上的固定一点在它绕着与其相切且半径相同的另外一个圆周滚动时所形成的轨迹，因其形状像心形而得名。根据方程表达式得到所有点的坐标，然后把每个点连接起来，然后填充，最后就行成一个心形了。上面的代码是画一个实心的心形，当然我们也可以画空心的，只需要做出一点点的修改就可以。：是一个常数，用来控制心形的大小，..
复制链接

扫一扫