Javascript 忽略画布上的字体大小答案

【问题标题】：Javascript ignoring font size on canvasJavascript 忽略画布上的字体大小
【发布时间】：2022-12-03 15:09:22
【问题描述】：

我从不喜欢 CSS 并避免使用它 js 的问题在于，有时它会使用类似 CSS 的字符串来表示真正应该是数字的东西。比如字体大小。

不管怎样，这段代码：旨在创建不同宽度的画布元素并将所有字体设置为 20px，但结果显示字体在较大的窗口中变大！

为什么？我没有指示它使用不同大小的字体？

<html>
<body>
<script>
var n=0, wind=30, canv=[], ct=[]
for (n=0; n<wind; n++){
 canv[n] = document.createElement('canvas');
 canv[n].id = "C"+n;
 canv[n].style.width = 30*n+"px";
 canv[n].style.height = 30*n+"px";
 canv[n].style.top = 5*n + "px";
 canv[n].style.left = 5*n + "px";
 canv[n].style.zIndex = n;
 canv[n].style.position = "absolute";
 canv[n].style.border = "2px solid";
 
document.body.appendChild(canv[n]);
 ct[n] = canv[n].getContext("2d");
 ct[n].font="20px Arial"
 ct[n].fillText(n,20,20)
}
</script>
</body>
</html>

【问题讨论】：

另见Canvas is stretched when using CSS but normal with "width" / "height" properties。

标签： javascript html css html5-canvas font-size

【解决方案1】：

在较大的窗口中字体大小似乎增加的原因是字体大小以像素 (px) 指定，这是一个固定的度量单位。这意味着字体的大小不会随着窗口的大小而改变。

此问题的一种可能解决方案是使用相对度量单位指定字体大小，例如百分比 (%)、em 或 rem。这些度量单位将缩放相对于父元素的字体大小，在本例中为画布元素。

下面是一个示例，说明如何修改代码以使用字体大小的相对测量单位：

var n=0, wind=30, canv=[], ct=[]
for (n=0; n<wind; n++){
  canv[n] = document.createElement('canvas');
  canv[n].id = "C"+n;
  canv[n].style.width = 30*n+"px";
  canv[n].style.height = 30*n+"px";
  canv[n].style.top = 5*n + "px";
  canv[n].style.left = 5*n + "px";
  canv[n].style.zIndex = n;
  canv[n].style.position = "absolute";
  canv[n].style.border = "2px solid";
 
  document.body.appendChild(canv[n]);
  ct[n] = canv[n].getContext("2d");
  ct[n].font="2em Arial" // Use a relative unit of measurement for the font size
  ct[n].fillText(n,20,20)
}

在上面的示例中，字体大小设置为 2em，这意味着它将是父元素（即 canvas 元素）默认字体大小的两倍。这意味着字体大小将与画布元素的大小成比例地缩放。

希望这可以帮助！

【讨论】：