Ausführliche Erläuterung der Eigenschaften von Leinwandlinien

Werte: stumpf (Standardwert), rund, quadratisch

 var canvas=document.getElementById(canvas);canvas.width=800;canvas.height=800;var context=canvas.getContext(2d);context.lineWidth=40;context.StrokeStyle=#005588;//Three beginpath() zeichnet drei parallele Linien 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();context.beginPath();context.moveTo(100,600);context.lineTo(700,600);context.lineCap=square;context.Stroke();//baselinecontext.li neWidth=1;context.StrokeStyle=#27a;Context.moveTo(100,100);Context.LineTo(100,700);Context.MoveTo(700,100);Context.LineTo(700,700);Context.Stroke();

Wenn „rund“ für die Animation verwendet wird, können abgerundete Ecken direkt gezeichnet werden. Der Effekt von lineCap kann nur am Anfang und Ende des Liniensegments verwendet werden, nicht an der Verbindung.

lineCap=square kann verwendet werden, um das Liniensegment beim Schließen vollständig zu schließen. Es wird jedoch weiterhin empfohlen, es mit fabricPath() zu schließen.

 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(); //Empfohlen context.lineWidth=10;context.lineCap=square; //Nicht empfohlen context.fillStyle= Yellow;context.StrokeStyle=#058context.fill();context.Stroke();

Die fünf Winkel auf einem Kreis halbieren 360°, jeder Winkel beträgt 72°, 90°-72°=18°

Die Winkel auf der kleinen Kreishalbierenden betragen 72°, 18°+36°=54°

Winkel zu Bogenmaß – Bogenmaß = Winkel*π/180, also (18+i*72)*Math.PI/180

 var canvas=document.getElementById(canvas);canvas.width=800;canvas.height=800;var context=canvas.getContext(2d);context.beginPath();//Winkel zum Bogenmaß: dividieren durch 180*PIfor( var i=0;i<5;i++){ context.lineTo(Math.cos((18+i*72)/180*Math.PI)*300+400, -Math.sin((18+i*72)/180*Math.PI)*300+400 ); context.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();

Eingekapselt in eine Funktion:

 window.onload=function(){ var canvas=document.getElementById(canvas); var context=canvas.getContext(2d); 150.300.400.400)} Funktion drawStar(ctx,r,R,x,y,){ ctx.beginPath(); //Winkel zum Bogenmaß: dividiere durch 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.stroke();}

Ändern Sie die kleinen Werte r=80, 200 bzw. 400, um die folgenden Grafiken zu erhalten

Fügen Sie einen Rotationsparameter im Uhrzeigersinn hinzu: rot

 window.onload=function(){ var canvas=document.getElementById(canvas); var context=canvas.getContext(2d); 150,300,400,400,30);} //Drehwinkelfunktion im Uhrzeigersinn drehen drawStar(ctx,r,R,x,y,rot){ ctx.beginPath(); //Winkel im Bogenmaß: dividiere durch 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.Stroke();}

Der Effekt einer Drehung um 30 Grad ist wie folgt:

1. lineJoin-Wert

Gehrung (Standard) stellt immer eine scharfe Ecke, eine abgeschrägte Gehrung und eine runde Ecke dar

Die Abschrägung wirkt wie ein nach unten gefaltetes Band.

2. Mitre-bezogene miterLimit-Attribute

Setzen Sie das kleine r auf 30 und lineJoin auf Gehrung. Der Effekt ist wie folgt: Die Ecken werden nicht in scharfe Ecken verlängert, sondern abgeschrägt angezeigt.

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

Warum?

Da der Standardwert von context.miterLimit=10 10 ist,

miterlimit ist nur wirksam, wenn lineJoin den Wert „mitre“ hat.

miterLimit bezieht sich auf den Maximalwert des Abstands zwischen den Innen- und Außenecken, der entsteht, wenn Gehrung zum Verbinden von Linien verwendet wird.

Der Standardwert ist 10, was bedeutet, dass der Maximalwert 10 Pixel beträgt. Sobald er 10 Pixel überschreitet, wird er im Abschrägungsmodus angezeigt.

Wenn der Innenkreisradius r oben auf 30 eingestellt ist, ist der gebildete spitze Winkel sehr spitz und der Abstand zwischen der Innenecke und der Außenecke überschreitet den Gehrungsgrenzwert von 10.

Ändern Sie nun den Gehrungsgrenzwert auf einen größeren Wert, nämlich 20. Der Effekt ist wie folgt:

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

Hinweis: MiterLimit ist nicht der Abstand von der weißen Spitze zur schwarzen Spitze. Dieser Abstand ist viel größer als 20 Pixel.

Wenn miterLimit generiert wird, muss die Linie eine Breite haben, und die scharfe Ecke der Mittellinie der Linie mit Breite ist der direkte Abstand von der äußeren scharfen Ecke.

Canvas ergibt einen mitreLimit-Erfahrungswert von 10. Nur unter ganz besonderen Umständen, wenn sehr scharfe Ecken dargestellt werden müssen, muss miterLimit geändert werden.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.