HTML 5画布字体被忽略

Question

我试图将一些文本写入到画布元素中，但似乎我设置的字体选项完全被忽略了。无论我如何更改它们，最终都会显示相同的内容，这应该是默认的10像素无衬线字体。这是我的代码（此函数在加载时运行）：

function start()
{
    canvas = document.getElementById('c');
    ctx = canvas.getContext('2d');
    ctx.fillStyle = "white";
    ctx.font = "12px monospace";
    ctx.textBaseline = "top";
}

它在Firefox和Chrome中都不起作用。

- The.Anti.9

---

如果您传递了一个错误的格式字符串，例如带有额外空格的“12 px monospace”，那么也会发生这种情况。 - Noumenon

Answer 1

如果您重置画布的大小，这也可能发生。至少，我今天在Chrome 23中看到了这一点。

context.font = 'bold 20px arial';
canvas.width = 100;
canvas.height = 100;
console.log(context.font); // gives '10px sans-serif'

- Drew Noakes

---

太棒了！我在这上面花费了很长时间。为什么这样的属性会在大小改变时被重置？对我来说似乎毫无意义。 - AdrianCooney

Answer 2

事实证明，ctx.font的更改需要在执行fillText()函数的同一函数中使用。

这使它像魅力一样工作。

编辑

正如richtaur在他的评论中提到的那样，这个答案是错误的。你的上下文需要使用ctx.save()和ctx.restore()保存和恢复，因为当你再次调用canvas.getContext('2d')时，它当前会被重置。

- The.Anti.9

---

我怀疑每次使用canvas.getContext('2d')重新获取图形上下文时，您都会获得一个新的上下文，该上下文将重置为默认字体。这是有道理的，因为您正在执行绘图操作，并且可能会以所有不同的字体呈现各种文本，并在呈现每个帧时循环遍历它们...因此，为每个新上下文(重新)设置字体是有意义的。 - Triynko

事实证明，ctx.font更改需要在执行fillText()的同一函数中使用 <-- 这不是它的工作方式。设置是该上下文的全局变量，因此它可能会在其他函数中被覆盖。您需要像 ctx.save() 然后 ctx.restore() 保存上下文状态。请参见：https://developer.mozilla.org/en/Drawing_text_using_a_canvas - richtaur

Answer 3

我曾经遇到过类似的问题。 在canvas元素之前，我提供了一个div元素，并在其中预加载了字体。

例如：

.

在 CSS 中，

#loadFont { font-family:"arial" }

- Greeshma