Question

当我设置宽度画布时，画布中的fontSize不正确（太小），我不知道为什么。

这是我的源代码：

<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（默认宽度）画布上绘制12px字体。如果您在文本已经在上下文中后调整画布大小，则逻辑上文本将会变小，因为画布大小后会更改为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>

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

1 个答案: