El tutorial está escrito directamente en radianes.
Intenté reescribirlo usando ángulos. Hay algunas diferencias. En resumen, es más conveniente usar radianes. Por supuesto, puedes decidir cuál es más fácil de entender.
A veces, al escribir código, no es necesario seguir los tutoriales exactamente. Las mejores prácticas son buenas, pero puedes ganar algo probando otra cosa, ¿verdad?
El efecto es como se muestra a continuación.
La primera es utilizar radianes directamente. 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, radio:200 } function drawCircularText(string,startAngle,endAngle){ var radio=circle.radius //El radio del círculo var angleDecrement=(startAngle-endAngle )/ (string.length-1)//El arco ocupado por cada letra var angle=parseFloat(startAngle) //Convierte el número var index=0; context.save() context.fillStyle=TEXT_FILL_STYLE; context.strokeStyle=TEXT_STROKE_STYLE; context.font=TEXT_SIZE+px Lucida Sans while(index<string.length){ personaje=string.charAt(index) context.save() contexto. comenzar ruta() context.translate(circle.x+Math.cos(angle)*radius,circle.y-Math.sin(angle)*radius) context.rotate(Math.PI/2-angle) //Math.PI/2 es Rotar 90 grados Math.PI/180*X es cuántos grados rotar context.fillText(character,0,0) context.strokeText(character,0,0) angle-=angleDecrement index++ context.restore() } context.restore() } context.textAlign=center context.textBaseLine=middle drawCircularText(en el sentido de las agujas del reloj alrededor del círculo,Math.PI*2,Math.PI/8) //El tercer parámetro representa la primera posición del texto ¿Cuántos radianes hay entre los dos? El segundo se introduce por ángulo. Tenga en cuenta la diferencia entre el segundo parámetro y el tercer parámetro de 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, radio:200 } function drawCircularText(string,startAngle,endAngle){ var radio=circle.radius //El radio del círculo var angleDecrement=(startAngle-endAngle )/ (string.length-1)//El arco ocupado por cada letra var angle=startAngle // var index=0 var context.save(); contexto.fillStyle=TEXT_FILL_STYLE; contexto.strokeStyle=TEXT_STROKE_STYLE; contexto.font=TEXT_SIZE+px Lucida Sans while(index<string.length){ carácter=string.charAt(index) context.save() context.beginPath() context.translate(circle.x+Math.cos((Math.PI/180)*ángulo)*radio,circle.y-Math.sin((Math.PI/180)*ángulo)*radio) context.rotate( (Math.PI/2)-(Math.PI/180)*ángulo) //Math.PI/2 es la rotación de 90 grados Math.PI/180*X es el grado de rotación context.fillText(character,0,0) context.strokeText(character,0,0) angle-=angleDecrement index++ context.restore () } context.restore() } context.textAlign=centro context.textBaseLine=medio drawCircularText(en el sentido de las agujas del reloj alrededor del círculo,360,10) //El tercer parámetro indica si el primer texto está conectado por cuántos radianes hay.Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.