canvas画布绘制正五角星

南无月

南无月

21楼代码改出来的旁边的小五角星。。老师瞧瞧

南无月

使用 x=cx+r*cos(弧度)、y=cy + r*sin(弧度) 这两个公式
这个公式神，老师更神。。
一万个赞。。

红影

马黑黑 发表于 2024-5-3 10:20
也不是，尝试而已

别人都想不到这个，这就是独创呢。

红影

马黑黑 发表于 2024-5-3 10:21
作图理论上细节越丰富图像的效果就会越好

但是细节丰富就要多花功夫呢。

马黑黑

红影 发表于 2024-5-3 14:27
但是细节丰富就要多花功夫呢。

这是成正比的

马黑黑

红影 发表于 2024-5-3 14:27
别人都想不到这个，这就是独创呢。

那我不知道别人想过没有，理论上是想过的

红影

马黑黑 发表于 2024-5-3 16:31
这是成正比的

太不容易了。

红影

马黑黑 发表于 2024-5-3 16:32
那我不知道别人想过没有，理论上是想过的

就算想过也没做过，只有黑黑做出来了

马黑黑

红影 发表于 2024-5-4 00:07
就算想过也没做过，只有黑黑做出来了

我把画法再改一下，一次性画完吧：

1. <canvas id="canv" width="400" height="400"></canvas>
   
2. 
   
3. <script>
   
4. 
   
5. var ctx = canv.getContext('2d');
   
6. var size = canv.width / 2, r1 = size - 10, r2 = r1 * 2/5, points = [];
   
7. 
   
8. for(var i = 0; i < 5; i ++) {
   
9.     var x1 = Math.cos((18 + i * 72) / 180 * Math.PI) * r1 + size,
   
10.         y1 = -Math.sin((18 + i * 72) / 180 * Math.PI) * r1 + size,
    
11.         x2 = Math.cos((54 + i * 72) / 180 * Math.PI) * r2 + size,
    
12.         y2 = -Math.sin((54 + i * 72) / 180 * Math.PI) * r2 + size;
    
13.     points.push({x1: x1, y1: y1, x2: x2, y2: y2});
    
14. }
    
15. 
    
16. var draw5star = () => {
    
17.     for(var j = 0; j < 5; j++) {
    
18.         ctx.beginPath();
    
19.         ctx.fillStyle = 'red';
    
20.         ctx.moveTo(points[j].x1, points[j].y1);
    
21.         ctx.lineTo(size, size);
    
22.         ctx.lineTo(points[j].x2, points[j].y2);
    
23.         ctx.lineTo(points[j].x1, points[j].y1);
    
24.         ctx.fill();
    
25.         ctx.beginPath();
    
26.         ctx.fillStyle = 'darkred';
    
27.         var k = j > 0 ? j - 1 : 4;
    
28.         ctx.moveTo(points[j].x1, points[j].y1);
    
29.         ctx.lineTo(size, size);
    
30.         ctx.lineTo(points[k].x2, points[k].y2);
    
31.         ctx.moveTo(points[j].x1, points[j].y1);
    
32.         ctx.fill();
    
33.     }
    
34. };
    
35. 
    
36. draw5star();
    
37. 
    
38. </script>

复制代码

马黑黑

红影 发表于 2024-5-4 00:07
太不容易了。

这是可想而知的、容易的，仅需要初中数学基础就能理解并能推导的

红影

马黑黑 发表于 2024-5-4 08:07
我把画法再改一下，一次性画完吧：

嗯，这法子好。反正 points 有了，选取另一组就把另一个颜色画完了，只是这选取很有讲究。
黑黑一下子就选出来了，厉害啊，js应用很熟练

红影

马黑黑 发表于 2024-5-4 08:08
这是可想而知的、容易的，仅需要初中数学基础就能理解并能推导的

这个是说增加细节的事吧，理论上说是要做更多设计的

红影

马黑黑 发表于 2024-5-4 08:07
我把画法再改一下，一次性画完吧：

用这新方法做个黄色的

                               
登录/注册后可看大图

马黑黑

红影 发表于 2024-5-4 12:23
用这新方法做个黄色的

很赞

马黑黑

红影 发表于 2024-5-4 12:20
这个是说增加细节的事吧，理论上说是要做更多设计的

设计也不是什么难事

马黑黑

红影 发表于 2024-5-4 12:18
嗯，这法子好。反正 points 有了，选取另一组就把另一个颜色画完了，只是这选取很有讲究。
黑黑一下子就 ...

for循环中做一些判断而已

红影

马黑黑 发表于 2024-5-4 12:24
很赞

红旗上用的星星就是黄的呢。黑黑后面这个代码更容易理解，那些点的选择也很巧妙呢

红影

马黑黑 发表于 2024-5-4 12:24
设计也不是什么难事

但毕竟更加花费功夫啊。

红影

马黑黑 发表于 2024-5-4 12:25
for循环中做一些判断而已

这个不清楚的时候，弄出来还是很难的。黑黑厉害