Comment dessiner des courbes lisses dans Canvas avec plusieurs points ?

Comment dessiner des courbes lisses avec plusieurs points dans JavaScript et HTML5 Canvas

Problème :

La création de courbes lisses dans les applications de dessin en joignant des points d'échantillonnage avec les fonctions "curveTo" entraîne des plis dus à des points de contrôle disjoints.

Solution :

Pour dessiner une courbe lisse à travers N points, une approche alternative consiste à « courber vers » les points médians entre les points suivants.

Code :

<code class="javascript">// Move to the first point
ctx.moveTo(points[0].x, points[0].y);

// Iterate through points
for (var i = 1; i < points.length - 2; i++) {
  // Calculate midpoint
  var xc = (points[i].x + points[i + 1].x) / 2;
  var yc = (points[i].y + points[i + 1].y) / 2;

  // Create quadratic curves to midpoints
  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
);</code>

Explication :

Cette méthode se rapproche d'une courbe lisse en joignant des courbes aux milieux de points adjacents. Chaque courbe disjointe partage un point final mais est influencée par des points de contrôle communs, ce qui entraîne des transitions douces aux points d'intersection.

Remarque :

Bien que cette approche ne s'étende pas à tous point d'échantillonnage, comme indiqué à l'origine dans le titre de la question, il produit des courbes lisses visuellement indiscernables qui suffisent à la plupart des applications de dessin.

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!