Das Tutorial ist direkt im Bogenmaß geschrieben
Ich habe versucht, es mit Winkeln umzuschreiben. Zusammenfassend lässt sich sagen, dass es bequemer ist, Bogenmaß zu verwenden.
Manchmal muss man sich beim Schreiben von Code nicht genau an die Tutorials halten, aber vielleicht gewinnt man doch etwas, wenn man etwas anderes ausprobiert, oder?
Der Effekt ist wie unten gezeigt
Die erste besteht darin, das Bogenmaß direkt zu verwenden var canvas=document.getElementById(canvas) var context=canvas.getContext(2d) var TEXT_FILL_STYLE=rgba(100,130,240,0.5) var TEXT_STROKE_STYLE=rgba(200,0,0,0.7) var TEXT_SIZE=64; x:canvas.width/2, y:canvas.height/2, radius:200 } function drawCircularText(string,startAngle,endAngle){ var radius=circle.radius //Der Radius des Kreises var angleDecrement=(startAngle-endAngle )/ (string.length-1)//Der von jedem Buchstaben eingenommene Bogen var angle=parseFloat(startAngle) //Drehen Sie die Zahl um var index=0; context.save() context.fillStyle=TEXT_FILL_STYLE; context.font=TEXT_SIZE+px Lucida Sans while(index<string.length){ Character=string.charAt(index) context.save() context. beginPath() context.translate(circle.x+Math.cos(angle)*radius,circle.y-Math.sin(angle)*radius) context.rotate(Math.PI/2-angle) //Math.PI/2 ist Um 90 Grad drehen Math.PI/180*X gibt an, um wie viel Grad gedreht werden soll context.fillText(character,0,0) context.StrokeText(character,0,0) angle-=angleDecrement index++ context.restore() } context.restore() } context.textAlign=center context.textBaseLine=middle drawCircularText(im Uhrzeigersinn um den Kreis,Math.PI*2,Math.PI/8) //Der dritte Parameter repräsentiert die erste Position des Textes Wie viel Bogenmaß liegen zwischen den beiden? Der zweite wird durch den Winkel eingebracht. Bitte beachten Sie den Unterschied zwischen dem zweiten Parameter und dem dritten Parameter von drawCircularText. var canvas=document.getElementById(canvas) var context=canvas.getContext(2d) var TEXT_FILL_STYLE=rgba(100,130,240,0.5) var TEXT_STROKE_STYLE=rgba(200,0,0,0.7) var TEXT_SIZE=64; x:canvas.width/2, y:canvas.height/2, radius:200 } function drawCircularText(string,startAngle,endAngle){ var radius=circle.radius //Der Radius des Kreises var angleDecrement=(startAngle-endAngle )/ (string.length-1)//Der von jedem Buchstaben eingenommene Bogen var angle=startAngle // var index=0; var context.save(); context.fillStyle=TEXT_FILL_STYLE; context.streichStyle=TEXT_STROKE_STYLE; context.font=TEXT_SIZE+px Lucida Sans while(index<string.length){ Character=string.charAt(index) context.save() context.beginPath() context.translate(circle.x+Math.cos((Math.PI/180)*angle)*radius,circle.y-Math.sin((Math.PI/180)*angle)*radius) context.rotate( (Math.PI/2)-(Math.PI/180)*Winkel) //Math.PI/2 ist die Drehung um 90 Grad Math.PI/180*X ist der Grad der Drehung context.fillText(character,0,0) context.StrokeText(character,0,0) angle-=angleDecrement index++ context.restore () } context.restore() } context.textAlign=center context.textBaseLine=middle drawCircularText(im Uhrzeigersinn um den Kreis,360,10) //Der dritte Parameter gibt an, ob der erste Text durch die Anzahl der Bogenmaße verbunden ist.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.