Canvas 自定义字体呈现错误

Question

在 canvas 元素中使用自定义 @font-face，在 DOM 中呈现良好，当通过 canvas 呈现时，它会垂直拉伸文本。或者可能是水平挤压它，不知道。

CSS:

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

Canvas 元素宽度通过 CSS 设置为其父元素（300x250px 正方形）的 100%，通过以下方式将文本添加到 canvas：

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。

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

Canvas 自定义字体呈现错误

Canvas custom font renders wrong

javascript

fonts

canvas

font-face