在canvas画布中绘制立体正五角星

马黑黑 · 发表于 2024-5-2 21:28

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

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

x

效果

代码

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

var size = canv.width / 2, r1 = size - 10, r2 = r1 * 2/5, points = [];

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

var x1 = Math.cos((18 + i * 72) / 180 * Math.PI) * r1 + size,

y1 = -Math.sin((18 + i * 72) / 180 * Math.PI) * r1 + size,

x2 = Math.cos((54 + i * 72) / 180 * Math.PI) * r2 + size,

y2 = -Math.sin((54 + i * 72) / 180 * Math.PI) * r2 + size;

points.push({x1: x1, y1: y1, x2: x2, y2: y2});

}

var drawTriangle = () => {

for(var j = 0; j < 5; j++) {

ctx.beginPath();

ctx.moveTo(points[j].x1, points[j].y1);

ctx.lineTo(size, size);

ctx.lineTo(points[j].x2, points[j].y2);

ctx.lineTo(points[j].x1, points[j].y1);

ctx.fill();

}

};

var draw5star = () => {

ctx.fillStyle = 'red';

drawTriangle();

ctx.save();

ctx.fillStyle = 'darkred';

ctx.translate(size, size);

ctx.scale(-1, 1);

ctx.translate(-size, -size);

drawTriangle();

ctx.restore();

};

draw5star();

</script>

马黑黑 · 发表于 2024-5-2 21:41

本帖最后由马黑黑于 2024-5-2 21:56 编辑

思路：

（一）获取内、外圆五个角的xy坐标，以对象形式存入变量 points 数组中（代码 8~14行）；
（二）绘制三角形：连接 {x1, y2} → {cx, cy} → {x2, y2} → {x1, y1}，其中 cx、cy 为圆心点坐标。这将绘制出正五角星第一个角柱的一半，循环绘制后得出整体正五角星的一半（代码 16~25行）；
（三）调用绘制三角形函数，绘制好正五角星的一半之后，位移、变换（scale）画布坐标系再画另一半，得出完整正五角星（代码 27~37行）。
其它细节：

① 第 6 行代码声明了一系列变量：

var size = canv.width / 2, r1 = size - 10, r2 = r1 * 2/5, points = [];

size 是画布宽度的一半，因为画布宽高一样，所以，变量 szie 极为圆形 {cx, cy} 坐标值；
r1 是外圆半径，size - 10 是为了让绘制的图像不顶到边缘。r2 是内圆半径，按照 5:2 的比例取 r1 的值；
points 数组变量用于存储各叫的坐标值。

② 函数 drawTriangle() 用于绘制三角形：脚本将正五角星拆分为 10 个三角形，以顶角为例说明如下：顶角至圆心，分左边、右边两个三角形，每一次绘制只其中的一个。

③ 函数 draw5star() 调用函数 drawTriangle()，分两次绘制正五角星的每一个角柱的左右边，具体画法是先循环绘制其中的一半，再通过移位、变换坐标系画另一半，两次绘制使用不同的颜色填充以营造立体感。

声明：本画法为原创，但不知其中是否存在错误或不妥。