主頁 > 知識庫 > Canvas多邊形繪制的實現(xiàn)方法

Canvas多邊形繪制的實現(xiàn)方法

熱門標(biāo)簽:硅谷的囚徒呼叫中心 阿里云 使用U盤裝系統(tǒng) 檢查注冊表項 美圖手機 百度競價點擊價格的計算公式 網(wǎng)站建設(shè) 智能手機

前言

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

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循環(huán)中多一次循環(huán)lineTo()至起點
}

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

標(biāo)簽:湖北 山南 懷化 湘潭 通遼 賀州 煙臺 黃山

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《Canvas多邊形繪制的實現(xiàn)方法》,本文關(guān)鍵詞  ;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 收縮
    • 微信客服
    • 微信二維碼
    • 電話咨詢

    • 400-1100-266