Le tutoriel est écrit directement en radians
J'ai essayé de le réécrire en utilisant des angles. Il y a quelques différences. En résumé, il est plus pratique d'utiliser des radians. Bien sûr, vous pouvez décider lequel est le plus facile à comprendre.
Parfois, lorsque vous écrivez du code, vous n'êtes pas obligé de suivre à la lettre les didacticiels. Les meilleures pratiques sont bonnes, mais vous pourriez gagner quelque chose en essayant autre chose, n'est-ce pas ?
L'effet est comme indiqué ci-dessous
La première consiste à utiliser directement les radians 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 //Le rayon du cercle var angleDecrement=(startAngle-endAngle )/ (string.length-1)//L'arc occupé par chaque lettre var angle=parseFloat(startAngle) //Tourne le nombre var index=0 var Character; context.save() contexte.fillStyle=TEXT_FILL_STYLE; commencerPath() context.translate(circle.x+Math.cos(angle)*radius,circle.y-Math.sin(angle)*radius) context.rotate(Math.PI/2-angle) //Math.PI/2 est Rotation de 90 degrés Math.PI/180*X est le nombre de degrés de 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(dans le sens des aiguilles d'une montre autour du cercle,Math.PI*2,Math.PI/8) //Le troisième paramètre représente la première position du texte Combien y a-t-il de radians entre les deux ? Le second est introduit par angle. Veuillez noter la différence entre le deuxième paramètre et le troisième paramètre 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 circle={ x:canvas.width/2, y:canvas.height/2, radius:200 } function drawCircularText(string,startAngle,endAngle){ var radius=circle.radius //Le rayon du cercle var angleDecrement=(startAngle-endAngle )/ (string.length-1)//L'arc occupé par chaque lettre var angle=startAngle // var index=0 var Character; context.fillStyle = TEXT_FILL_STYLE; context.translate(circle.x+Math.cos((Math.PI/180)*angle)*rayon,circle.y-Math.sin((Math.PI/180)*angle)*rayon) context.rotate( (Math.PI/2)-(Math.PI/180)*angle) //Math.PI/2 est la rotation de 90 degrés Math.PI/180*X est le degré de rotation context.fillText(character,0,0) context.StrokeText(character,0,0) angle-=angleDecrement index++ context.restore () } context.restore() } context.textAlign=centre context.textBaseLine=middle drawCircularText(dans le sens des aiguilles d'une montre autour du cercle,360,10) //Le troisième paramètre indique si le premier texte est connecté par le nombre de radians.Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.