画布自定义字体呈现错误

Question

在canvas元素中使用自定义@font-face，在DOM中渲染得很好，当通过画布渲染时，它会垂直拉伸文本。或者可能是水平挤压它，不能说。

CSS：

@font-face {
    font-family: 'myFont';
    src: url('myFont.ttf');
}

Canvas元素宽度通过CSS设置为其父级（300x250px square）的100％，文本通过以下方式添加到画布：

cContext.fillStyle = "rgba(255,255,255,1)";
cContext.font = '58px "myFont"';
cContext.fillText("1000", 22, 71);

Answer 1

 

var c = document.getElementById("square");
var ctx = c.getContext("2d");;
ctx.font = "40px Arial";
ctx.fillStyle = "#FF0000";
ctx.fillText("1000",40,80);

var c2 = document.getElementById("notsquare");
var ctx2 = c2.getContext("2d");;
ctx2.font = "40px Arial";
ctx2.fillStyle = "#FF0000";
ctx2.fillText("1000",40,60);

#square, #notsquare{
  border: 1px solid red;
  }
#notsquare{ 
  width: 300px;
  height: 400px;
  left:0px;
}

<canvas id='square' width='300' height='300' ></canvas>
<canvas id='notsquare' width='300' height='300' ></canvas>

来自@pointy的例子。 要指定canvas元素的宽度和高度，您应该使用元素的属性而不是css。

如果你想调整画布大小，你应该像这样在JS中这样做 Resize HTML5 canvas to fit window