Explication détaillée des propriétés des lignes de toile

Valeurs : bout (valeur par défaut), rond, carré

 var toile=document.getElementById(canvas);canvas.width=800;canvas.height=800;var context=canvas.getContext(2d);context.lineWidth=40;context.StrokeStyle=#005588;//Trois Beginpath() dessinent trois lignes parallèles context.beginPath();context.moveTo(100,200);co ntext.lineTo(700,200);context.lineCap=butt;context.stroke();context.beginPath();context.moveTo(100,400);context.lineTo(700,400);context.lineCap=roun d;context. Stroke (); neWidth = 1;

Lorsque round est utilisé pour l'animation, les coins arrondis peuvent être dessinés directement. L'effet de lineCap ne peut être utilisé qu'au début et à la fin du segment de ligne, pas au niveau de la connexion.

lineCap=square peut être utilisé pour fermer complètement le segment de ligne lorsqu'il est fermé, mais il est toujours recommandé d'utiliser ClothPath() pour le fermer.

 var canvas=document.getElementById(canvas);canvas.width=800;canvas.height=800;var context=canvas.getContext(2d);context.beginPath();context.moveTo(100, 350);context.lineTo(500,350);context.lineTo(500,200);context.lineTo(700,400);context.lineTo(500,600);context.lineTo(500,450);context.lineTo(100,450);context.lineTo(100,350 );// context.closePath(); //Recommandé context.lineWidth=10;context.lineCap=square; //Non recommandé context.fillStyle=blue;context.StrokeStyle=#058context.fill();context.Stroke();

Les cinq angles d'un cercle coupent en deux 360°, chaque angle est de 72°, 90°-72°=18°

Les angles du petit cercle se coupent en deux 72°, 18°+36°=54°

Angle par rapport aux radians - radians = angle*π/180, soit (18+i*72)*Math.PI/180

 var canvas=document.getElementById(canvas);canvas.width=800;canvas.height=800;var context=canvas.getContext(2d);context.beginPath();//Angle par rapport au radian : diviser par 180*PIfor( var je=0;i<5;i++){ contexte.lineTo(Math.cos((18+i*72)/180*Math.PI)*300+400, -Math.sin((18+i*72)/180*Math.PI)*300+400 ); contexte.lineTo(Math.cos((54+i*72)/180*Math.PI)*150+400, -Math.sin((54+i*72)/180*Math.PI)*150+400);}context.closePath();context.lineWidth=10;context.stroke();

Encapsulé dans une fonction :

 window.onload=function(){ var toile=document.getElementById(canvas); toile.largeur=800; var contexte=canvas.getContext(2d); 150 300 400 400)} fonction drawStar(ctx,r,R,x,y,){ ctx.beginPath(); //Angle par rapport au radian : diviser par 180*PI for(var i=0;i<5;i++){ ctx.lineTo(Math.cos((18+i*72)/180*Math .PI)*R+x, -Math.sin((18+i*72)/180*Math.PI)*R+y); ctx.lineTo(Math.cos((54+i*72)/180*Math.PI)*r+x, -Math.sin((54+i*72)/180*Math.PI)*r+y ); } ctx.closePath(); ctx.AVC();}

Modifiez respectivement les petits r=80, 200 et 400 pour obtenir les graphiques suivants

Ajouter un paramètre de rotation dans le sens des aiguilles d'une montre : rot

 window.onload=function(){ var toile=document.getElementById(canvas); toile.largeur=800; var contexte=canvas.getContext(2d); 150,300,400,400,30);} //Fonction d'angle de rotation dans le sens des aiguilles d'une montre drawStar(ctx,r,R,x,y,rot){ ctx.beginPath(); //Angle en radians : diviser par 180*PI for(var i=0;i<5;i++){ ctx.lineTo( Math.cos((18+i*72-rot)/180*Math.PI)*R+x, -Math.sin((18+i*72-rot)/180*Math.PI)*R+y); ctx.lineTo(Math.cos((54+i*72-rot)/180*Math.PI )*r+x, -Math.sin((54+i*72-rot)/180*Math.PI)*r+y } ctx.closePath(); ctx.AVC();}

L’effet d’une rotation de 30 degrés est le suivant :

1. valeur lineJoin

l'onglet (par défaut) présente toujours un coin vif, un onglet biseauté, un coin arrondi

Le biseau ressemble à l’effet d’un ruban replié.

2. Attributs miterLimit liés à Miter

Réglez le petit r sur 30 et lineJoin sur miter. L'effet est le suivant : les coins ne sont pas étendus en angles vifs, mais sont affichés de manière biseautée.

 context.lineJoin=miter;drawStar(context,30,300,400,400,30);

Pourquoi?

Étant donné que la valeur par défaut de context.miterLimit=10 est 10,

miterlimit n'est efficace que lorsque lineJoin est miter.

miterLimit fait référence à la valeur maximale de la distance entre les coins intérieurs et extérieurs produite lorsque l'onglet est utilisé comme moyen de connecter des lignes.

La valeur par défaut est 10, ce qui signifie que la valeur maximale est de 10 px. Une fois qu'elle dépasse 10 px, elle sera affichée en mode biseau.

Lorsque le rayon du cercle intérieur r est réglé sur 30 ci-dessus, l'angle aigu formé est très aigu et la distance entre le coin intérieur et le coin extérieur dépasse la limite d'onglet de 10.

Modifiez maintenant la limite d'onglets pour une valeur plus grande, à 20. L'effet est le suivant :

 contexte.lineJoin=mitre; contexte.miterLimit=20; drawStar(contexte,30,300,400,400,30);

Remarque : miterLimit n'est pas la distance entre la pointe blanche et la pointe noire. Cette distance est bien supérieure à 20 px.

Lorsque miterLimit est généré, la ligne doit avoir une largeur et le coin pointu de la ligne médiane de la ligne avec largeur est la distance directe du coin pointu extérieur.

canvas donne une valeur d'expérience mitreLimit de 10. Ce n'est que dans des circonstances extrêmement particulières, lorsque des angles très aigus doivent être représentés, que miterLimit doit être modifié.

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.