设置 canvas 宽度时，字体大小在 canvas 中不起作用

Question

当我设置宽度canvas时，canvas中的字体大小不正确（太小），我不知道为什么。

这是我的源代码：

<canvas id="canvas"></canvas>
<script type="text/javascript">
c = document.getElementById("canvas");
ctx = c.getContext("2d"); 

text = "Test";
ctx.font = "normal 12px sans-serif";
c.width = 200;
ctx.fillText(text, 0, 20);
</script>

你有想法吗？

在此先衷心感谢您。

Answer 1

您首先需要设置所需的 canvas 宽度。
否则将首先在 300px（默认宽度）canvas 上绘制 12px 的字体。如果在文本已经在上下文中之后调整 canvas 的大小，从逻辑上讲，文本最终会变小，因为 canvas 大小更改为 200 之后 .

c = document.getElementById("canvasa");
c.width = 200; // HERE!!!!!!
ctx = c.getContext("2d"); 


text = "Test";
ctx.font = "normal 12px sans-serif";
ctx.fillText(text, 0, 20);

<canvas id="canvasa"></canvas>

设置 canvas 宽度时，字体大小在 canvas 中不起作用

font size don't work in canvas when setting the canvas width

canvas

font-size