canvas 五角星之回顾初中三角函数

Posted 2020-08-01

当程序中遇到三角函数的时候我是懵逼的，于是百度了“初中三角函数”，

忘了这几个公式的，自己打脸。

目的是通过Canvas画一个五角星，

突破口：只要能通过给定的两个外圈点的半径，和内圈点的半径，借助上面的公式计算出每个五角星点的坐标。

主要代码如下：

【300】指的是外圈的半径

【150】指的是内圈的半径

 

<canvas id="canvas" width="800" height="800"></canvas>

 

        var cvs = document.getElementById("canvas");
        var ctx = cvs.getContext("2d");

        ctx.lineWidth = 2;
        ctx.beginPath();
        
        for (var i = 0; i < 5; i++) {
            ctx.lineTo(Math.cos((18 + i * 72) / 180 * Math.PI) * 300 + 400, -Math.sin((18 + i * 72) / 180 * Math.PI) * r1 + 400);
            ctx.lineTo(Math.cos((54 + i * 72) / 180 * Math.PI) * 150 + 400, -Math.sin((54 + i * 72) / 180 * Math.PI) * r2 + 400);
        }
        
        ctx.closePath();
        
        ctx.strokeStyle ="red"
        ctx.stroke();        
        

封装成方法

        function draw_star5(ctx , r1 , r2 , x , y , rot){  // r1 大圆半径，r2小圆半径，圆心坐标x，圆心坐标y,rot旋转角度（可无） 顺时针
            ctx.beginPath();
            for (var i = 0; i < 5; i++) {
                ctx.lineTo(Math.cos((18 + i * 72 - rot) / 180 * Math.PI) * r1 + x, -Math.sin((18 + i * 72 - rot) / 180 * Math.PI) * r1 + y);
                ctx.lineTo(Math.cos((54 + i * 72 - rot) / 180 * Math.PI) * r2 + x, -Math.sin((54 + i * 72 - rot) / 180 * Math.PI) * r2 + y);
            }        
            ctx.closePath();
        }