Moyen facile de dessiner des courbes en utilisant la toile de HTML5

Cet article présente principalement la méthode simple d'utilisation du canevas HTML5 pour dessiner des courbes. Il s'agit des connaissances de base de l'introduction à HTML5. Les amis qui en ont besoin peuvent y faire référence.

Méthode de courbe de Canvas2d

Récemment, j'étudie le calcul des corps doux 3D, donc j'ajoute des connaissances. Cela implique souvent une analyse numérique, principalement divers algorithmes d'interpolation pour les courbes. Je me suis soudain rappelé que Canvas2d lui-même peut également dessiner des courbes, en utilisant des courbes baz quadratiques et cubes. En fait, je n'ai pas encore utilisé cette méthode, essayons-le maintenant ~

Cet article est à peu près le dessin de courbe simple, alors ne parlons pas de beaucoup de principes complexes. En outre, le principe de la courbe Baz lui-même est très simple, vous pouvez le comprendre en regardant Wikipedia. En fait, de nombreux outils de dessin de courbe simples utilisent des courbes baz. Si vous avez utilisé les courbes dans les propres outils de dessin de Windows, vous devez les connaître. Vous pouvez d'abord faire glisser une ligne droite, puis cliquer sur une certaine position pour faire torsion la ligne droite. L'action de drag initiale détermine les deux sommets de la courbe et l'action de clic ajoute le point intermédiaire. L'outil de dessin fourni avec Windows utilise des courbes baz cubes et vous pouvez ajouter deux points intermédiaires. La courbe de Bate est différente de l'interpolation polynomiale générale. Son point intermédiaire n'est utilisé que comme point de contrôle, pas le sommet que la courbe doit traverser. Et il peut également faire des courbes fermées. Canvas2d fournit deux méthodes pour dessiner des courbes

quadraticcurveto: courbe de baze quadratique

Beziercurveto: courbe de lunette cubique

La ligne est tirée de la position actuelle et la position actuelle peut être spécifiée par la méthode MoveTo. Avec la position de début de la courbe, le point intermédiaire et la position finale sont également nécessaires. Il suffit de passer ces coordonnées de position à la fonction de dessin. Par exemple, une courbe quadratique Batez nécessite un point intermédiaire et une position finale, donc deux coordonnées doivent être transmises à la fonction QuadraticCurveto. Les coordonnées sont composées de X et Y, ce qui signifie que cette fonction a 4 paramètres. Beziercurveto est le même, sauf qu'il a deux points intermédiaires. Utilisons-le maintenant