Canvas多邊形繪制的實現(xiàn)方法
發(fā)布時間：2019-08-05 15:21:43 作者：ZzZzZ 
我要評論
我要評論這篇文章主要介紹了Canvas多邊形繪制的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
前言
Canvas繪制多變形非常簡單，只要懂得Canvas路徑 + 簡單的初中數(shù)學(xué)知識即可完成
解析
思路如上，非常簡單，計算每一個點的位置通過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í)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了canvas里面如何基于隨機點繪制一個多邊形的方法的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-13
這篇文章主要介紹了詳解canvas多邊形(蜘蛛圖)的畫法示例的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-29借助HTML5 Canvas來繪制三角形和矩形等多邊形的方法
這篇文章主要介紹了借助HTML5 Canvas來繪制三角形和矩形等多邊形的方法,通過文章開頭給的一些屬性及下面三角形和矩形的例子,同理便可得出其他多邊形的畫法,需要的朋友可以2016-03-14
