HTML 5 canvas字体被忽略

Question

我正在尝试将一些文本写入canvas元素，但似乎我放入的字体选项被完全忽略了。无论我改变它们，它都是相同的，我相信它是默认的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中使用。

Answer 1

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

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

Answer 2

事实证明，ctx.font更改需要在执行fillText()

的同一函数中使用

这使它像魅力一样工作。

修改

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

Answer 3

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

例如：-

.

在 CSS 中，

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