comment dessiner la courbe lisse par N points à l'aide de javascript HTML5 canvas?

Pour une application de dessin, je suis d'enregistrer le mouvement de la souris en coordonnées dans un tableau puis les dessiner avec lineTo. La ligne n'est pas lisse. Comment puis-je produire une courbe unique entre tous les réunis points?

J'ai cherché sur google mais j'ai seulement trouvé 3 fonctions de dessin de lignes: 2 points d'exemple, il suffit d'utiliser lineTo. Pour 3 points d'échantillonnage quadraticCurveTo, pour 4 points d'échantillonnage, bezierCurveTo.

(J'ai essayé de dessiner un bezierCurveTo pour tous les 4 points de la matrice, mais cela conduit à des kinks toutes les 4 points d'exemple, au lieu d'en continu d'une courbe lisse.)

Comment puis-je écrire une fonction pour dessiner une courbe lisse avec 5 points d'échantillonnage et au-delà?

  • Qu'entendez-vous par "lisse"? Infiniment dérivable? Deux fois dérivable? Splines cubiques ("courbes de Bézier") ont beaucoup de bonnes propriétés et sont deux fois dérivable, et assez facile à calculer.
  • SB, par "lisse", je veux dire visuellement ne peut pas détecter tous les coins/cuspides etc.
  • êtes-vous rendu les lignes en temps réel, ou de retarder le rendu jusqu'à ce que après avoir recueilli un tas de points?
  • Je suis la collecte de points dans un tableau. Vous avez besoin d'au moins 4 points à utiliser cet algorithme. Après cela, vous pouvez effectuer le rendu en temps réel sur une toile de compensation de l'écran à chaque appel de mouseMove
  • N'oubliez pas d'accepter une réponse. C'est bien si c'est votre propre.
InformationsquelleAutor Homan | 2011-08-14