Maison >interface Web >js tutoriel >Comment pouvez-vous connecter facilement plusieurs points à l'aide de JavaScript ?
Dans les applications de dessin, il est essentiel de pouvoir connecter plusieurs points en douceur. Cependant, l'utilisation des fonctions de dessin de lignes JavaScript natives (lineTo, quadraticCurveTo et bezierCurveTo) offre une approche limitée, entraînant des plis ou des courbes disjointes. Cet article explore une méthode pour créer des courbes lisses à travers une série de points à l'aide d'une technique d'approximation.
Lors de l'utilisation de fonctions "curveTo" distinctes pour chaque paire de points, le la courbe résultante présente des discontinuités aux extrémités. En effet, chaque segment de courbe n'est influencé que par ses propres points de contrôle spécifiques.
La solution proposée consiste à connecter les courbes aux points médians entre les points d'échantillonnage suivants. Cela crée plus de continuité aux extrémités, car l'extrémité d'une courbe devient un point de contrôle pour la suivante.
Pour mettre en œuvre cette approximation, suivez ces étapes :
Voici un extrait de code qui démontre cette approche :
<code class="javascript">const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); const points = [ { x: 50, y: 50 }, { x: 180, y: 100 }, { x: 75, y: 120 }, { x: 40, y: 40 }, ]; // Move to the first point ctx.moveTo(points[0].x, points[0].y); // Iterate through the remaining points for (var i = 1; i < points.length - 2; i++) { // Calculate the midpoint var xc = (points[i].x + points[i + 1].x) / 2; var yc = (points[i].y + points[i + 1].y) / 2; // Draw a curve from the current point to the midpoint ctx.quadraticCurveTo(points[i].x, points[i].y, xc, yc); } // Curve through the last two points ctx.quadraticCurveTo( points[i].x, points[i].y, points[i + 1].x, points[i + 1].y ); // Stroke the curve ctx.stroke();</code>
Ce code démontre la fluidité courbe qui peut être tracée à travers plusieurs points en utilisant cette technique d'approximation.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!