canvas画布绘制正五角星

马黑黑 · 发表于 2024-5-2 10:51

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

效果：

代码：

var ctx = canv.getContext('2d');

var points = [], keys = [0,2,4,1,3];

for(let i = 0; i < 5; i ++) {

var x = 200 + 190 * Math.cos((72*i-18) * Math.PI/180),

y = 200 + 190 * Math.sin((72*i - 18) * Math.PI/180);

points.push({x: x, y: y});

}

ctx.beginPath();

points.forEach((_,key) => ctx.lineTo(points[keys[key]].x, points[keys[key]].y));

ctx.closePath();

ctx.lineWidth = 3;

ctx.fillStyle = 'red';

ctx.fill();

</script>

马黑黑 · 发表于 2024-5-2 11:40

本帖最后由马黑黑于 2024-5-2 11:44 编辑

正五角星就是我们国旗上使用的五角星，五个角尖每个角的角度度为36度。

传统的canvas画布绘制正五角星的方法首先需要计算出五个角尖的xy坐标，再计算五个内角的xy坐标，然后按角尖→内角→角尖这样的次序将各点连接起来。这种画法需要注意一个问题：外圆和内圆的半径比例应为 5:2，否则画出的五角星不是正五角星。

一楼效果不采用这种方法。思路是酱紫：

计算出正五边形各个角的xy坐标，然后每间隔一个角将各个角连接起来。这其实是一笔手绘正五角星的方法的代码演绎，不同的是效果——代码绘制的绝对比手绘的精准。

具体画法：

先定义一个点坐标数组 points 变量，用来存储即将计算的各个角的坐标值，同时设计一个数组下标序列列表 keys，用以指引绘制连线。

接着用一个for循环语句求出正五边形各个角的xy坐标，使用 x=cx+r*cos(弧度)、y=cy + r*sin(弧度) 这两个公式（cx、cy 为圆心坐标 x、y 值，r 为半径）：

x = 200 + 190 * Math.cos((72*i-18) * Math.PI/180)
y = 200 + 190 * Math.sin((72*i-18) * Math.PI/180)

200 分别是圆心x、y坐标值，190 是圆的半径；72 来源于 360/5，就是五等分圆的角度值；i 是循环步进变量，不同的角角度不一样；每个角减去 18 是为了扶正五角星而做的调节；Math.PI/180 是角度转换为弧度的需要，来源于公式弧度=角度*π/180 。
这些正五边形的角坐标值以对象 {x: 值, y: 值} 的形式存入 points 变量中，留待绘制之时使用。

最后绘制，核心要点是，按 keys 下标序列取出各个角的坐标值，依次绘制连线即可。本例，使用填充方法 fill() 给五角星着色，也可以使用 stroke() 方法描边，两者同时使用也可以（注意定义一下 strokeStyle 和 lineWidth）。