2012-10-10 4 views
0

캔버스에 텍스트를 쓰고 있으며 텍스트 크기에 따라 동적으로 크기를 조정해야하는 일종의 테두리를 추가하려고합니다.HTML5 canvas lineWidth가 무시됩니다.

내 코드는 다음과 같습니다

<script> 
var mainText='this is a test'; 
var mainTextSize=40; 
var mainTextDimensions=getTextDimensions(mainText,mainTextSize,'verdana'); 

var smallStampCanvas=document.createElement("canvas"); 
smallStampCanvas.width=mainTextDimensions.width; 
smallStampCanvas.height=totalHeight; 
var smallStampContext=smallStampCanvas.getContext('2d'); 
smallStampContext.textBaseline='top'; 

smallStampContext.fillStyle = '#FF0000'; 
smallStampContext.strokeStyle = smallStampContext.fillStyle; 

smallStampContext.font = "bold "+mainTextSize+"px verdana"; 
smallStampContext.fillText(
    mainText, 
    0, 
    0 
); 

smallStampContext.strokeRect(0,0,smallStampCanvas.width,smallStampCanvas.height); 
smallStampContext.strokeRect(0,0,smallStampCanvas.width,mainTextDimensions.height); 
smallStampContext.lineWidth=Math.ceil(mainTextSize/4); 
smallStampContext.moveTo(0,mainTextDimensions.height); smallStampContext.lineTo(smallStampCanvas.width,mainTextDimensions.height); 
</script> 

모든 선폭을 제외하고 잘 작동합니다. 어떤 가치가 입력 되더라도 효과가없는 것 같습니다. (줄은 항상 1px입니다) 로깅 할 때 정수 10을 입력하십시오.

누구나 무슨 문제인지 알 수 있습니까?

+0

두꺼운 선을 그려야하는 코드를 표시 할 수 있습니까? – enhzflep

답변

3

이 시도 :

smallStampContext.beginPath(); 
smallStampContext.lineWidth=Math.ceil(mainTextSize/4); 
smallStampContext.moveTo(0,mainTextDimensions.height); 
smallStampContext.lineTo(smallStampCanvas.width,mainTextDimensions.height); 
smallStampContext.stroke(); 

moveTolineTo는 "선"을 그릴 수 없습니다. stroke 만 실제 행을 작성합니다.

+0

빙고! 정확히 내가 얻은 것 - 선 너비를 설정 한 후에 선 그리기를 한 코드가 없습니다. rep ++ – enhzflep

+0

젠장, 나는 그저 단순한 일에 실패했다. 지금 큰 일! 고마워요! +1 – user6