Método de implementação de desenho de polígono Canvas

Desenhar múltiplas deformações com o Canvas é muito simples. Você só precisa entender os caminhos do Canvas + conhecimentos simples de matemática do ensino médio para concluí-lo.

CodePen abre

A ideia é como acima, muito simples, basta calcular a posição de cada ponto e traçar o caminho através de lineTo()

O código principal é analisado da seguinte forma (ou visualizado no CodePen):

 function drawPolygonPath(sideNum, radius, originX, originY, ctx){ ctx.beginPath(); const unitAngle = Math.PI * 2 / sideNum; // ctx.moveTo(originX, originY); for(let i = 0; i < sideNum; i++){ //Percorra os pontos de cálculo e desenhe o caminho com lineTo() xLength = radius * Math.cos(angle); yLength = radius * Math.sin(angle); /Draw Path angle += unitAngle; } ctx.closePath();//Caminho fechado, você também pode fazer um loop lineTo() mais uma vez no loop for até o ponto inicial}

O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.