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