前言
Canvas繪制多變形非常簡單，只要懂得Canvas路徑 + 簡單的初中數學知識即可完成
CodePen打開
解析
思路如上，非常簡單，計算每一個點的位置通過lineTo()繪制路徑即可
核心代碼解析如下（或在CodePen中查看）：
function drawPolygonPath(sideNum, radius, originX, originY, ctx){ ctx.beginPath(); const unitAngle = Math.PI * 2 / sideNum; //計算單元角度 let angle = 0; //初始角度 let xLength, yLength; // ctx.moveTo(originX, originY); for(let i = 0; i < sideNum; i++){ //遍歷計算點，并lineTo()繪制路徑 xLength = radius * Math.cos(angle); yLength = radius * Math.sin(angle); ctx.lineTo(originX + xLength, originY - yLength);//繪制路徑 angle += unitAngle; } ctx.closePath();//閉合路徑，也可在for循環中多一次循環lineTo()至起點}以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
