Учебное пособие написано непосредственно в радианах.
Я попытался переписать его, используя углы. Есть некоторые различия. В общем, удобнее использовать радианы. Конечно, вы можете решить, какой из них легче понять.
Иногда при написании кода вам не обязательно точно следовать инструкциям. Лучшие практики — это хорошо, но вы можете получить что-то, попробовав что-то другое, не так ли?
Эффект такой, как показано ниже
Первый — напрямую использовать радианы. 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 //Радиус круга var angularDecrement=(startAngle-endAngle )/ (string.length-1)//Дуга, занятая каждой буквой var angular=parseFloat(startAngle) //Поворот числа 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() context. начатьПуть() context.translate(circle.x+Math.cos(angle)*radius,circle.y-Math.sin(angle)*radius) context.rotate(Math.PI/2-angle) //Math.PI/2 Поворот на 90 градусов Math.PI/180*X — на сколько градусов нужно повернуть context.fillText(character,0,0) context.strokeText(character,0,0) angular-=angleDecrement index++ context.restore() } context.restore() } context.textAlign=center context.textBaseLine=middle drawCircularText(по часовой стрелке вокруг круга,Math.PI*2,Math.PI/8) //Третий параметр представляет первую позицию текста Сколько радиан между ними? Второй вводится по углу. Обратите внимание на разницу между вторым параметром и третьим параметром 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 //Радиус круга var angularDecrement=(startAngle-endAngle )/ (string.length-1)//Дуга, занятая каждой буквой var angular=startAngle // var index=0; var 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)*угол) //Math.PI/2 — поворот на 90 градусов Math.PI/180*X — градус поворота context.fillText(character,0,0) context.strokeText(character,0,0) angular-=angleDecrement index++ context.restore () } context.restore() } context.textAlign=center context.textBaseLine=middle drawCircularText(по часовой стрелке по кругу, 360,10) //Третий параметр указывает, связан ли первый текст на сколько радиан.Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.