canvas笔记-画一个五角星（含算法）
生活随笔
收集整理的這篇文章主要介紹了
canvas笔记-画一个五角星（含算法）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
算法如下：
上面的圖是正三角形：
說下算法，關于上面那些x，y是怎么算出來的。
這里大圓的5個頂點，每個頂點占用的角度為360/5 = 72度，左邊那個18度是通過90 - 72 = 18度。
大圓半徑為R，所以
x為cos(18度) * R
y為-sin(18度) * R
這個負是因為坐標y，是因為向下為正。
其他角度通過加72度就可以了！
?
下面來看下那個54度是怎么算的！
72 * 2 - 90 = 54度，同樣半徑為r
x為cos(54度) * r
y為-sin(54度) * r
其他角度通過加72度就可以了！
?
如果要旋轉角度，只要畫點時，每個點加一個對應的角度即可！
?
下面是代碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><canvas id="canvas" style="border:1px solid #aaa;display:block;margin:50px auto;">當前瀏覽器不支持Canvas，請更換瀏覽器后再試 </canvas><script>window.onload = function() {let canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 800;let context = canvas.getContext("2d");context.lineWidth = 10;drawStar(context, 150, 300, 400, 400, 0);}function drawStar(cxt, r, R, x, y, rot){cxt.beginPath();for(let i = 0; i < 5; i++){cxt.lineTo(Math.cos((18 + i * 72 - rot) / 180 * Math.PI) * R + x,-Math.sin((18 + i * 72- rot) / 180 * Math.PI) * R + y);cxt.lineTo(Math.cos((54 + i * 72 - rot) / 180 * Math.PI) * r + x,-Math.sin((54 + i * 72 - rot) / 180 * Math.PI) * r + y);}cxt.closePath();cxt.stroke();} </script></body> </html>程序運行截圖如下：
這里有一個要注意的，就是cos里面要傳弧度，下面是度和弧度轉換的格式：
1弧度=180/pai 度
1度=pai/180 弧度
?
?
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的canvas笔记-画一个五角星（含算法）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Android逆向笔记-Proguard
- 下一篇： Web前端笔记-移动端触屏移动视角（tw