html5怎么使用Canvas繪制多邊形？代碼分享！

在之前小編為大家分享過一篇有關(guān)于繪制圖形的文章，那么今天小編繼續(xù)和大家來講講在：“ html5怎么使用Canvas繪制多邊形？ ”這個(gè)問題的相關(guān)文章內(nèi)容，希望大家收益匪淺！

前言

Canvas繪制多變形非常簡(jiǎn)單，只要懂得Canvas路徑 + 簡(jiǎn)單的初中數(shù)學(xué)知識(shí)即可完成

CodePen打開

解析

思路如上，非常簡(jiǎn)單，計(jì)算每一個(gè)點(diǎn)的位置通過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)
}

這就是今天有關(guān)于：“html5怎么使用Canvas繪制多邊形？”這個(gè)問題的相關(guān)內(nèi)容分享，更多有關(guān)于html5這方面的知識(shí)點(diǎn)我們都可以在W3Cschool中進(jìn)行學(xué)習(xí)和了解！