Dibujar múltiples deformaciones con Canvas es muy simple. Solo necesita comprender las rutas de Canvas + conocimientos matemáticos simples de la escuela secundaria para completarlo.
Se abre CodePen
analizar gramaticalmenteLa idea es la anterior, muy simple, simplemente calcule la posición de cada punto y dibuje el camino a través de lineTo()
El código principal se analiza de la siguiente manera (o se ve en CodePen):
function drawPolygonPath(sideNum, radio, originX, originY, ctx){ ctx.beginPath(); const unitAngle = Math.PI * 2 / sideNum //Calcular el ángulo unitario let angle = 0 //Ángulo inicial let xLength, yLength; // ctx.moveTo(origenX, origenY); for(let i = 0; i < sideNum; i++){ //Recorre los puntos de cálculo y dibuja el camino con lineTo() xLength = radio * Math.cos(angle); yLength = radio * Math.sin(angleTo(originX + xLength, originY - yLength); /Dibujar ángulo de ruta += unitAngle; } ctx.closePath();//Ruta cerrada, también puedes realizar un bucle lineTo() una vez más en el bucle for hasta el punto inicial}Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.