캔버스의 텍스트 크기 조정

캔버스의 너비는 300이고 높이는 150으로 기본 설정되어있는 것처럼 보입니다. 텍스트가있는 캔버스와 툴팁이 필요합니다.캔버스의 텍스트 크기 조정

<!DOCTYPE html> 
<html> 
<body> 

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> 
Your browser does not support the HTML5 canvas tag.</canvas> 

<script> 

var c=document.getElementById("myCanvas"); 
var ctx=c.getContext("2d"); 

c.style.height="25px"; 
//2: This stretches the visible portion of the text. Not what I wanted. 
//c.style.width="125px"; 

ctx.font="130px Georgia"; 
//3: If I don't want to set the font family this doesn't seem to set the font size. 
//ctx.fontSize="130"; 
ctx.fillText("Hello World!",0,130); 
</script> 

</body> 
</html>

내가 캔버스의 크기를 감소하지만 이상한 일이해야 할 것 같다있는 극적으로 글꼴 크기를 늘려야 : 따라서 나는 (JSfiddle에)이 샘플에 대한 세 가지 질문이 . 이 접근법이 맞습니까?
캔버스의 크기를 늘리면 보이는 부분이 늘어남에 따라 전체 'Hello World'를 표시 할 수 없습니다. 전체 텍스트를 어떻게 표시합니까?
글꼴 패밀리를 설정하지 않고 글꼴 크기를 어떻게 설정할 수 있습니까?

감사합니다.

출처

2014-03-13 Badgerspot

사용이 대신은 :

c.width = 200; // just for example. Defined in pixels using integer values 
c.height = 25;

CSS에만 요소하지만 문맥에 사용되는 비트 맵에 영향을 미칩니다. 캔버스를 편집 가능한 이미지로 생각하십시오. 실제 너비와 높이가 원본과 동일하지만 이미지는 CSS로 간단하게 늘릴 수 있습니다.

글꼴 그룹을 지정하지 않고 글꼴 크기를 설정할 수 없습니다.

당신은 현재의 폰트를 추출하고 변경할 수 있습니다

위대한

var cFont = ctx.font, 
    parts = cFont.split(' '); 

if (parts.length === 2) { 
    ctx.font = newSize + 'px ' + parts[1]; 
} 
else if (parts.length === 3) { 
    ctx.font = parts[0] + ' ' + newSize + 'px ' + parts[2]; //bold/italic/.. used 
}

출처

2014-03-13 10:09:42 K3N

, 감사합니다. – Badgerspot

캔버스의 텍스트 크기 조정

답변

관련 문제