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

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



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

目的是通过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();
}