HTML5画布问题？

Question

这里是我的JS代码：

function Show(output, startX, startY){ 
    var c = document.getElementById("myCanvas"); 
    var context = c.getContext("2d"); 

    context.fillText ("A" , startX, startY); 

    context.font   = 'bold 20px sans-serif'; 
    context.fillText ("B" , startX, startY + 50); 
} 
Show(outputcpu, 50, 50); 
Show(outputio, 150, 50); 

我的期望是有些东西一样：
AA
乙乙

但我不知道为什么我得到的是：
A A
BB
我认为由于context.font的问题持续到下一个函数调用。但我不知道如何阻止它！ 任何想法！？

Answer 1

在绘制之前你需要重新设置字体 - 尝试：

function Show(output, startX, startY){ 
    var c = document.getElementById("myCanvas"); 
    var context = c.getContext("2d"); 
    context.font = ' 20px sans-serif'; 
    context.fillText ("A" , startX, startY); 

    context.font = 'bold 20px sans-serif'; 
    context.fillText ("B" , startX, startY + 50); 
} 
Show(outputcpu, 50, 50); 
Show(outputio, 150, 50); 

这里是一个小提琴 - http://jsfiddle.net/8Tuzp/

编辑：

如果你真的不喜欢改变字体两次（我没有看到这样做的问题），你可以保存画布状态并在绘制粗体文本后恢复它。在更改字体之前恢复画布上下文。

function Show(output, startX, startY){ 
    var c = document.getElementById("myCanvas"); 
    var context = c.getContext("2d"); 
    context.save(); 
    context.fillText ("A" , startX, startY); 
    context.font = 'bold 20px sans-serif'; 
    context.fillText ("B" , startX, startY + 50); 
    context.restore(); 
} 
Show(null, 50, 50); 
Show(null, 150, 50); 

Answer 2

您需要设置字体粗细恢复正常上下文属性是持久跨越的getContext（）调用：

context.fillText ("A" , startX, startY); 
context.font   = 'bold 20px sans-serif'; 
context.fillText ("B" , startX, startY + 50); 
context.font   = '20px sans-serif';