Question

画布似乎默认宽度为300，高度为150.我想要的是一个带有文字的小得多的画布，一个工具提示。因此，我有三个关于此示例的查询（在JSfiddle上）：

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

c.style.height="25px";
//2: This stretches the visible portion of the text. Not what I wanted.
//c.style.width="125px";

ctx.font="130px Georgia";
//3: If I don't want to set the font family this doesn't seem to set the font size.
//ctx.fontSize="130";
ctx.fillText("Hello World!",0,130);
</script>

</body>
</html>

我减小了画布的大小，但我需要大幅增加字体大小，这似乎是一件奇怪的事情。这种方法是否正确？
我无法获得整个“Hello World＆＃39;显示随着画布大小的增加拉伸文本的可见部分。如何显示整个文本？
如何在不设置字体系列的情况下设置字体大小？

感谢。

Answer 1

请改用：

c.width = 200;  // just for example. Defined in pixels using integer values
c.height = 25;

CSS仅影响元素，但不影响用于上下文的位图。将画布视为可编辑的图像。只需用CSS拉伸图像，而实际的宽度和高度与原始图像相同。

您无法在不指定字体系列的情况下设置字体大小。

您可以提取当前字体并更改：

var cFont = ctx.font,
    parts = cFont.split(' ');

if (parts.length === 2) {
    ctx.font = newSize + 'px ' + parts[1];
}
else if (parts.length === 3) {
    ctx.font = parts[0] + ' ' + newSize + 'px ' + parts[2]; //bold/italic/.. used
}

调整画布中的文本大小

1 个答案: