2017-10-15 1 views
0

캔버스에 텍스트를 그리는 중입니다. 문제는 ctx.font = font가 완전히 무시되고 기본값이 10px sans-serif로 설정됩니다. 내 기능은 다음과 같습니다.명시 적으로 할당 할 때 캔버스 글꼴이 무시됩니다.

function drawResTexts(num) { 
        var num = num || ""; 
        var font = (resTxtStyle["font-style"+num] != 
undefined ? resTxtStyle["font-style"+num] : "normal") + " " + resTxtStyle["font-size"+num] + "px " + resTxtStyle["font"+num]; 

        ctx.font = font; // This line has no effect whatsoever 

        ctx.textAlign = resTxtStyle["align"+num] || "left"; 
        var txtArr = resTxt.split("\n"); 

        for (var i = 0; i < txtArr.length; i++) { 
         if (resTxtStyle["stroke"+num] != undefined) { 
          var stroke = resTxtStyle["stroke"+num].split(" "); 
          ctx.strokeStyle = stroke[1]; 
          ctx.lineWidth = Number(stroke[0]) * 2; 
          ctx.strokeText(txtArr[i], resTxtStyle["pos"+num][0], resTxtStyle["pos"+num][1]); 
         } 
         ctx.fillStyle = resTxtStyle["color"+num]; 
         ctx.fillText(txtArr[i], resTxtStyle["pos"+num][0], resTxtStyle["pos"+num][1] + i * (resTxtStyle["line-height"+num] || 0)); 
        } 
       } 

그럼이 함수는 drawText()를 사용하여 호출합니다.

글꼴 변수는 다음 "regular 45px Georgia"

입니다

resTxtStyle = { 
      "align": "center", 
      "font": "Georgia", 
      "font-size": "45", 
      "font-style": "regular", 
      "color": "#FFFF4C", 
      "stroke": "2 #000" 
} 

누군가가 도움을 주시기 바랍니다 수 있습니까 resTxtStyle OBJ이야?

여기에도 비슷한 문제가 있지만 여기서 - http://www.tenpay.tech/questions/2162612/html-5-canvas-font-being-ignored하지만 여기에서 canvas.getContext가 다시 호출되어 글꼴을 재설정했지만 내 경우에는 해당 사례가 없습니다.

도움을 받으실 수 있습니다.

답변

1

글꼴이 "보통 45px 조지아"여야합니다. 그 이상한 이유는 모든 그래픽 소프트웨어가 글꼴 스타일에 "보통"을 사용하기 때문입니다. 다른 사람이 도움을받을 수 있습니다.

+0

예 캔버스'font' 속성은 올바른 CSS'font' 단축형 값을 기대합니다. * standard *'font-weight'는'normal'라고하며, * regular * 또는 *평원*. 이름이 마음에 들지 않는다면 [TrueType 숫자 가중치 소수점] (https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#Common_weight_name_mapping)을 사용할 수도 있습니다. 그리고 모든 그래픽 소프트웨어가 "규칙적인" "*"을 사용한다는 당신의 주장은 잘못된 것입니다. 그들은 글꼴 디자이너가 그들에게 준 이름을 사용합니다. 예를 들면 나의 osx 디폴트 * Tahoma *는 * normal *이고, * Savoye LET *은 plain *입니다. – Kaiido

+0

좋아요, 저를 시정 해 주셔서 고마워요. –

관련 문제