Méthode de mise en œuvre du dessin de polygones Canvas

Dessiner plusieurs déformations avec Canvas est très simple. Il vous suffit de comprendre les chemins Canvas + des connaissances mathématiques simples au collège pour le compléter.

CodePen s'ouvre

L'idée est comme ci-dessus, très simple, il suffit de calculer la position de chaque point et de tracer le chemin via lineTo()

Le code principal est analysé comme suit (ou affiché dans CodePen) :

 function drawPolygonPath(sideNum, radius, originX, originY, ctx){ ctx.beginPath(); const unitAngle = Math.PI * 2 / sideNum; //Calculer l'angle unitaire let angle = 0; //Angle initial let xLength, yLength; // ctx.moveTo(originX, originY); for(let i = 0; i < sideNum; i++){ //Parcourez les points de calcul et tracez le chemin avec lineTo() xLength = radius * Math.cos(angle); yLength = radius * Math.sin(angle); /Draw Path angle += unitAngle; } ctx.closePath();//Chemin fermé, vous pouvez également boucler lineTo() une fois de plus dans la boucle for jusqu'au point de départ}

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.