텍스트

Question

내가 여기 예를 들어 캔버스 모양 에 텍스트를 추가 내 코드이다하는 방법을 알아 내려고 노력하고 있어요와 캔버스 모양을 작성 :

var text ="5"; // text to display over the circle 
context.fillStyle = "red"; 
context.beginPath(); 
context.arc(50,70, 10, 0, Math.PI * 2); 
context.closePath(); 
context.fill(); 

누군가가한다면 나는 매우 그것을 appriciate 것 고맙습니다. 미리 감사드립니다.

내가이 너무 캔버스에 다시 작성해야 알아낼 EDIT 내가 지금까지 가지고 무엇 ...하지만 원의 중심에있는 텍스트 나던 allign :

context.fillStyle = "red"; 
    context.beginPath(); 
    var radius = 10; // for example 
    context.arc(200, 200, radius, 0, Math.PI * 2); 
    context.closePath(); 
    context.fill(); 
    context.fillStyle = "black"; // font color to write the text with 
    var font = "bold " + radius +"px serif"; 
    context.font = font; 
    context.textBaseline = "top"; 
    context.fillText(text, 200-radius/4 ,200-radius/2); 

Answer 1

당신이 여기에서 볼 수 있듯이 :

http://jsfiddle.net/DKcpS/

을 텍스트가 그려지고 에 시작 동그라미의 중심에서 시작하여 textBaseline을 top에 입력 한 후 텍스트의 맨부터 시작합니다.

이 같은 텍스트가 거의 텍스트의 폭과 높이를 사용하여 중심 :

http://jsfiddle.net/DKcpS/1/

우리가 폭 속성을 가진 textMetrics 객체를 반환하는 context.measureText(theTextToMeasure) 기능이 볼 수 있듯이. 지금은 높이가 없습니다. 그래서 우리는 그런 추측을해야합니다.