Canvas多邊形繪製的實作方法

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()至起點}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。