O tutorial é escrito diretamente em radianos
Tentei reescrever usando ângulos. Existem algumas diferenças. Em resumo, é mais conveniente usar radianos. Claro, você pode decidir qual deles é mais fácil de entender.
Às vezes, ao escrever código, você não precisa seguir exatamente os tutoriais. As melhores práticas são boas, mas você pode ganhar algo tentando outra coisa, certo?
O efeito é mostrado abaixo
A primeira é usar radianos diretamente 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 //O raio do círculo var angleDecrement=(startAngle-endAngle )/ (string.length-1)//O arco ocupado por cada letra var angle=parseFloat(startAngle) //Gira o 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){ character=string.charAt(index) context.save() contexto. caminhoinicial() context.translate(circle.x+Math.cos(angle)*radius,circle.y-Math.sin(angle)*radius) context.rotate(Math.PI/2-angle) //Math.PI/2 é Girar 90 graus Math.PI/180*X é quantos graus girar context.fillText(character,0,0) context.strokeText(character,0,0) angle-=angleDecrement index++ context.restore() } context.restore() } context.textAlign=center context.textBaseLine=middle drawCircularText(sentido horário ao redor do círculo,Math.PI*2,Math.PI/8) //O terceiro parâmetro representa a primeira posição do texto Quantos radianos existem entre os dois? O segundo é trazido por ângulo. Observe a diferença entre o segundo parâmetro e o terceiro 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, radius:200 } function drawCircularText(string,startAngle,endAngle){ var radius=circle.radius //O raio do círculo var angleDecrement=(startAngle-endAngle )/ (string.length-1)//O arco ocupado por cada letra var angle=startAngle // var index=0; 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)*ângulo)*raio,circle.y-Math.sin((Math.PI/180)*ângulo)*raio) context.rotate( (Math.PI/2)-(Math.PI/180)*ângulo) //Math.PI/2 é a rotação de 90 graus Math.PI/180*X é o grau de rotação context.fillText(character,0,0) context.strokeText(character,0,0) angle-=angleDecrement index++ context.restore () } context.restore() } context.textAlign=center context.textBaseLine=middle drawCircularText(sentido horário ao redor do círculo,360,10) //O terceiro parâmetro indica se o primeiro texto está conectado por quantos radianos existem.O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.