<style>
#canv { display: block;position: relative; margin: 20px auto; border: 0px solid gray; transform: rotate(35deg);}
</style>
<canvas id="canv" width="200" height="200" ></canvas></div>
<script>
var ctx = canv.getContext('2d');
var points = [], keys = ;
for(let i = 0; i < 5; i ++) {
var x = 100 + 85 * Math.cos((72*i-18) * Math.PI/180),
y = 100 + 85 * Math.sin((72*i - 18) * Math.PI/180);
points.push({x: x, y: y});
}
ctx.beginPath();
points.forEach((_,key) => ctx.lineTo(points].x, points].y));
ctx.closePath();
ctx.stroke();
ctx.strokeStyle = 'cyan';
ctx.fillStyle = 'rgba(255,215,0,.7)';
ctx.fill();
</script>
21楼代码改出来的旁边的小五角星。。老师瞧瞧{:4_170:}
使用 x=cx+r*cos(弧度)、y=cy + r*sin(弧度) 这两个公式
这个公式神，老师更神。。
一万个赞。。{:4_173:}
马黑黑 发表于 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
这是成正比的
太不容易了。{:4_204:}
马黑黑 发表于 2024-5-3 16:32
那我不知道别人想过没有，理论上是想过的
就算想过也没做过，只有黑黑做出来了{:4_187:}
红影 发表于 2024-5-4 00:07
就算想过也没做过，只有黑黑做出来了
我把画法再改一下，一次性画完吧：
<canvas id="canv" width="400" height="400"></canvas>
<script>
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 draw5star = () => {
for(var j = 0; j < 5; j++) {
ctx.beginPath();
ctx.fillStyle = 'red';
ctx.moveTo(points.x1, points.y1);
ctx.lineTo(size, size);
ctx.lineTo(points.x2, points.y2);
ctx.lineTo(points.x1, points.y1);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = 'darkred';
var k = j > 0 ? j - 1 : 4;
ctx.moveTo(points.x1, points.y1);
ctx.lineTo(size, size);
ctx.lineTo(points.x2, points.y2);
ctx.moveTo(points.x1, points.y1);
ctx.fill();
}
};
draw5star();
</script>
红影 发表于 2024-5-4 00:07
太不容易了。
这是可想而知的、容易的，仅需要初中数学基础就能理解并能推导的
马黑黑 发表于 2024-5-4 08:07
我把画法再改一下，一次性画完吧：
嗯，这法子好。反正 points 有了，选取另一组就把另一个颜色画完了，只是这选取很有讲究。
黑黑一下子就选出来了，厉害啊，js应用很熟练{:4_199:}
马黑黑 发表于 2024-5-4 08:08
这是可想而知的、容易的，仅需要初中数学基础就能理解并能推导的
这个是说增加细节的事吧，理论上说是要做更多设计的{:4_173:}
马黑黑 发表于 2024-5-4 08:07
我把画法再改一下，一次性画完吧：
用这新方法做个黄色的
https://pic.imgdb.cn/item/6635b8080ea9cb1403e78da9.png
红影 发表于 2024-5-4 12:23
用这新方法做个黄色的
很赞
红影 发表于 2024-5-4 12:20
这个是说增加细节的事吧，理论上说是要做更多设计的
设计也不是什么难事
红影 发表于 2024-5-4 12:18
嗯，这法子好。反正 points 有了，选取另一组就把另一个颜色画完了，只是这选取很有讲究。
黑黑一下子就 ...
for循环中做一些判断而已
马黑黑 发表于 2024-5-4 12:24
很赞
红旗上用的星星就是黄的呢。黑黑后面这个代码更容易理解，那些点的选择也很巧妙呢{:4_187:}
马黑黑 发表于 2024-5-4 12:24
设计也不是什么难事
但毕竟更加花费功夫啊。{:4_187:}
马黑黑 发表于 2024-5-4 12:25
for循环中做一些判断而已
这个不清楚的时候，弄出来还是很难的。黑黑厉害{:4_199:}