HTML 5 画布字体被忽略答案

【问题标题】：HTML 5 canvas font being ignoredHTML 5 画布字体被忽略
【发布时间】：2011-03-21 23:12:18
【问题描述】：

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

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

它不适用于 Firefox 或 Chrome。

【问题讨论】：

如果你传入了一个错误的格式字符串，例如"12 px monospace" 带有一个额外的空格，也会发生这种情况。

标签： javascript html canvas fonts

【解决方案1】：

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

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

【讨论】：

很棒的提示！我花了一辈子的时间在这上面。为什么当大小改变时这样的属性会被重置？对我来说似乎很荒谬。

【解决方案2】：

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

这使它像魅力一样工作。

编辑

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

【讨论】：

我怀疑每次使用 canvas.getContext('2d') 重新获取图形上下文时，都会得到一个重置为默认字体的新上下文。这是有道理的，因为您正在执行绘图操作，并且可能会以所有不同的字体渲染各种文本，并在渲染每一帧时循环浏览它们......所以（重新）为每个新上下文设置字体会使感觉。
> 事实证明，ctx.font 更改需要在执行 fillText() 的同一函数中使用 ctx.save() 然后ctx.restore() 那样保存你的上下文状态。见：developer.mozilla.org/en/Drawing_text_using_a_canvas

【解决方案3】：

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

例如：-

在 CSS 中，

#loadFont { 字体系列：“arial” }

【讨论】：