Notes d'étude préliminaires de Html5 Canvas (10) - Chemin complexe

J'ai déjà présenté des tracés de dessin simples. Cet article présente le dessin de polylignes et de courbes de Bézier. Tout d'abord, les polylignes sont introduites :

.

Le code est le suivant :

context.beginPath();
context.moveTo(100,50);
//context.lineTo(100,50);
context.lineTo(150,150);
context.lineTo(50,150);
//context.closePath();
context.stroke();

Introduit auparavant, moveTo est suivi des coordonnées horizontales et verticales du point de départ. Je l'ai essayé, et le premier est lineTo est également possible. Le lineTo suivant consiste à tracer une ligne droite à partir de ce point. au point suivant, puis utilisez ce point comme point de départ. L'ajustement de lineTo s'effectue du point précédent à ce point. ; est activé, alors le point actuel sera Ce point est connecté au point de départ le plus ancien pour former un triangle fermé L'effet est le suivant :

.

Voir ci-dessous Courbe de Bézier : Il existe deux méthodes pour implémenter la courbe de Bézier :

quadraticCurveTo

et bezierCurveTo , qui sont la courbe de Bézier quadratique et la courbe de Bézier cubique. La différence entre la courbe de Bézier cubique et la courbe de Bézier cubique est que la courbe de Bézier quadratique n'a qu'un seul pic, tandis que la courbe de Bézier cubique a à la fois des pics et des creux. regardez la courbe quadratique de Bézier L'effet est le suivant :

Le code est le suivant :

Le premier est le point de départ, ou il peut être

context.beginPath();
context.moveTo(50,250);
//context.lineTo(50,250);
context.quadraticCurveTo(150,100,250,250);
//context.closePath();
context.stroke();

moveTo

ou lineTo, puis appelez quadraticCurveTo, les deux premiers paramètres sont les coordonnées du point de contrôle, Les deux derniers paramètres sont les coordonnées horizontales et verticales du point final. le point est la même que la coordonnée horizontale du « pic de la vague ». La coordonnée verticale du pic de la vague est liée à la coordonnée verticale du pic de la vague, c'est-à-dire que plus la coordonnée verticale est grande, plus elle est élevée. le pic de la vague. Si vous ouvrez context.closePath();, l'effet est le suivant :

Jetons un coup d'oeil à la courbe cubique de Bézier. Regardons d'abord l'effet :

Le code est le suivant :

bezierCurveTo

context.beginPath();
context.moveTo(50,200);
//context.lineTo(50,250);
context.bezierCurveTo(100,100,150,300,200,200);
//context.closePath();
context.stroke();

Les trois paramètres sont respectivement les coordonnées horizontales et verticales de la première ou crête ou creux de l'onde, l'horizontale et les coordonnées verticales du pic ou du creux de la deuxième vague, ainsi que les coordonnées horizontales et verticales du point final, ouvrez également

context.closePath(); , l'effet est le suivant :

Ce qui précède est le contenu de l'étude préliminaire Html5 Canvas Notes (10) - Chemins complexes Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !