動態創建 canvas 時奇怪的忽略字體大小 - 重新發布

Question

我被要求重新發布這個問題。 首先它被標記為重復 CSS 問題，但我不使用 CSS。這是一個 JS 異常

這兩個代碼應該做同樣的事情。 但是，第一個動態 canvas 忽略了字體大小，並在較大的窗口中將字體縮放得更大！

<html>
<body>
<script>
var n=0, c=[], ct=[]
for (n=0; n<2; n++){
  c[n] = document.createElement('canvas');
  c[n].id = "C"+n;
  c[n].style.width = (400*n+70)+"px";
  c[n].style.height = (400*n+70)+"px";
  c[n].style.border = "2px solid";
 
  document.body.appendChild(c[n]);
  ct[n] = c[n].getContext("2d");
  ct[n].font="30px Arial"
  ct[n].fillText("Hello",3,30)
}
</script></body></html>

這里內聯創建了兩個 canvas，這次它按預期工作

<html>
<body>

<canvas id="C0" width="70" height="70" style="border: 2px solid;"> </canvas>
<canvas id="C1" width="470" height="470" style="border: 2px solid;"> </canvas>

<script>
 var c =[], ct=[]
 c[0]=document.getElementById("C0")
 ct[0] = c[0].getContext("2d")
 c[1] = document.getElementById("C1")
 ct[1] = c[1].getContext("2d")
 ct[0].font="30px Arial"
 ct[1].font="30px Arial"
 ct[0].fillText("Hello",3,30)
 ct[1].fillText("Hello",3,30)

</script> </body></html>

JS 確實有一些奇怪的缺陷，如果這個問題可以保持開放以征求意見，而不是作為“CSS 問題”被掃地出門，我將不勝感激！

Answer 1

這似乎與混亂有關

style.width 與寬度值

下面的兩個代碼都設置了 canvas 大小，但其中一個會影響文本的顯示方式！

 c[n].style.width = (400*n+70)+"px";
 c[n].style.height = (400*n+70)+"px";

要么

c[n].width = 400*n+70
c[n].height = 400*n+70

動態創建 canvas 時奇怪的忽略字體大小 - 重新發布

問題描述

1 個解決方案

解決方案1
0 2022-12-03 09:14:01

動態創建 canvas 時奇怪的忽略字體大小 - 重新發布

問題描述

1 個解決方案

解決方案1 0 2022-12-03 09:14:01

解決方案1
0 2022-12-03 09:14:01