The tutorial is written directly in radians
I tried to rewrite it using angles. There are some differences. In summary, it is more convenient to use radians. Of course, you can decide which one is easier to understand.
Sometimes when writing code, you don’t have to follow the tutorials exactly. Best practices are good, but you might gain something by trying something else, right?
The effect is as shown below
The first is to use radians directly 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; circle={ x:canvas.width/2, y:canvas.height/2, radius:200 } function drawCircularText(string,startAngle,endAngle){ var radius=circle.radius //The radius of the circle var angleDecrement=(startAngle-endAngle)/ (string.length-1)//The arc occupied by each letter var angle=parseFloat(startAngle) //Turn the number var index=0; var character; context.save() context.fillStyle=TEXT_FILL_STYLE; context.strokeStyle=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(angle)*radius,circle.y-Math.sin(angle)*radius) context.rotate(Math.PI/2-angle) //Math.PI/2 is Rotate 90 degrees Math.PI/180*X is how many degrees to rotate context.fillText(character,0,0) context.strokeText(character,0,0) angle-=angleDecrement index++ context.restore() } context.restore() } context.textAlign=center context.textBaseLine=middle drawCircularText(clockwise around the circle,Math.PI*2,Math.PI/8) //The third parameter represents the first position of the text How many radians are there between the two? The second one is brought in by angle. Please note the difference between the second parameter and the third parameter of 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; circle={ x:canvas.width/2, y:canvas.height/2, radius:200 } function drawCircularText(string,startAngle,endAngle){ var radius=circle.radius //The radius of the circle var angleDecrement=(startAngle-endAngle)/ (string.length-1)//The arc occupied by each letter var angle=startAngle // var index=0; var character; context.save() context.fillStyle=TEXT_FILL_STYLE; context.strokeStyle=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)*angle) //Math.PI/2 is the rotation of 90 degrees Math.PI/180*X is the degree of rotation context.fillText(character,0,0) context.strokeText(character,0,0) angle-=angleDecrement index++ context.restore () } context.restore() } context.textAlign=center context.textBaseLine=middle drawCircularText(clockwise around the circle,360,10) //The third parameter indicates whether the first words are connected by how many radians there is.The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.