튜토리얼은 라디안으로 직접 작성되었습니다.
각도를 이용하여 다시 작성해 보았습니다. 요약하자면 라디안을 사용하는 것이 더 편리합니다. 물론 어느 것이 더 이해하기 쉬운지 결정할 수 있습니다.
때로는 코드를 작성할 때 튜토리얼을 정확하게 따를 필요는 없지만, 다른 것을 시도하면 뭔가를 얻을 수도 있습니다.
효과는 아래와 같습니다
첫 번째는 라디안을 직접 사용하는 것입니다. 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 angleDecrement=(startAngle-endAngle )/ (string.length-1)//각 문자가 차지하는 호 var angle=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){ 문자=string.charAt(index) context.save() 컨텍스트. 시작경로() 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.strokText(character,0,0) angle-=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 angleDecrement=(startAngle-endAngle )/ (string.length-1)//각 문자가 차지하는 호 var angle=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){ 문자=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.strokText(character,0,0) angle-=angleDecrement index++ context.restore () } context.restore() } context.textAlign=center context.textBaseLine=가운데 drawCircularText(원을 중심으로 시계방향,360,10) //세 번째 매개변수는 첫 번째 텍스트가 라디안 수만큼 연결되어 있는지 여부를 나타냅니다.위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.