Javascript HTML 5画布字体被忽略

我试图在画布元素中写入一些文本，但似乎我输入的字体选项被完全忽略了。不管我把它们改成什么，结果都是一样的，我相信这是默认的10px无衬线。这是我所拥有的（此函数在加载时运行）

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

事实证明，

ctx.font

更改需要在执行

fillText（）的相同函数中使用

这使它像一个魅力。

编辑

正如richtaur在评论中提到的，这个答案是错误的。您的上下文需要使用
ctx.save（）
和
ctx.restore（）
保存和还原，因为当您再次调用canvas.getContext（'2d'）时，它当前会被重置。
如果您重置画布的大小，也会发生这种情况。至少，我今天在Chrome 23上看到了这一点

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

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

例如：-

.
在CSS中

#加载字体
{
字体系列：“arial”
}
我怀疑每次使用canvas.getContext（'2d'）重新获取图形上下文时，都会得到一个重置为默认字体的新上下文。这是有意义的，因为您正在执行绘图操作，可能要以所有不同的字体渲染各种文本，并在渲染每个帧时循环使用它们。。。因此（重新）为每个新上下文设置字体是有意义的。>事实证明，ctx.font更改需要在执行fillText（）的相同函数中使用！我花了很多时间在这上面。当大小更改时，为什么要重置属性？对我来说似乎是荒谬的。如果传递的是错误格式的字符串，例如带有额外空格的
“12 px monospace”
，也会发生这种情况。
context.font = 'bold 20px arial';
canvas.width = 100;
canvas.height = 100;
console.log(context.font); // gives '10px sans-serif'