Implementierungsmethode für das Zeichnen von Canvas-Polygonen

Das Zeichnen mehrerer Verformungen mit Canvas ist sehr einfach. Sie müssen nur die Canvas-Pfade verstehen und einfache Mathematikkenntnisse für die Mittelstufe haben.

CodePen wird geöffnet

Die Idee ist wie oben, sehr einfach, berechnen Sie einfach die Position jedes Punkts und zeichnen Sie den Pfad durch lineTo()

Der Kerncode wird wie folgt analysiert (oder in CodePen angezeigt):

 function drawPolygonPath(sideNum, radius, originX, originY, ctx){ ctx.beginPath(); const unitAngle = Math.PI * 2 / sideNum; //Anfangswinkel let xLength, yLength; // ctx.moveTo(originX, originY); for(let i = 0; i < sideNum; i++){ //Durchlaufe die Berechnungspunkte und zeichne den Pfad mit lineTo() xLength = radius * Math.cos(angle); / /Draw Path angle += unitAngle; } ctx.closePath();//Geschlossener Pfad, Sie können lineTo() auch noch einmal in der for-Schleife zum Startpunkt schleifen}

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.