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()

这使它像魅力一样工作.

编辑

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