html5 캔버스가있는 방사형 텍스트

Question

지정된 반경에서 방사되는 텍스트를 쓰려고합니다.

즉, 원형 패턴으로 텍스트를 쓰려고하는데, 정의 된 내부 반경에서 방사형으로 방사합니다.

편집 :이 예제의 행 사이의 텍스트 작성하려고 해요 : http://mandelid.com/code/wheel/

Answer 1

사용 현명 문맥 변환을 당신이 완료됩니다.

단계 :
• 원 중심으로 변환하십시오.
• 각도로 컨텍스트 회전
• 텍스트의 시작 부분까지 수평 이동
• 텍스트를 그립니다.

var cv = document.getElementById('cv'); 
 
var ctx = cv.getContext('2d'); 
 

 
function drawText(txt, x, y, angle, radius) { 
 
    ctx.textAlign = 'left'; 
 
    ctx.textBaseline = 'middle'; 
 
    ctx.save(); 
 
    ctx.translate(x, y) 
 
    ctx.rotate(angle); 
 
    ctx.translate(radius, 0); 
 
    ctx.fillText(txt, 0, 0); 
 
    ctx.restore(); 
 
} 
 

 
drawText('Hello Folks', 100, 100, -Math.PI/4, 20); 
 

 
drawText('How are you ?', 100, 100, Math.PI/4, 20);

<canvas width=300 height=200 id='cv'></canvas>