Javascript HTML5画布问题？

以下是我的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);

我所期望的是：
A
BB

但我不知道为什么我得到的是：
AA
BB
我认为context.font的问题会一直持续到下一次函数调用。但我不知道如何阻止它！

---

有什么想法吗

您需要将字体权重设置回正常值，因为在getContext（）调用中上下文属性是持久的：

---

您需要将字体权重设置回正常值，因为上下文属性在getContext（）调用中是持久的：

---

您需要在绘制之前重置字体-请尝试：

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

这是一把小提琴-

编辑：

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

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

---

您需要在绘制之前重置字体-请尝试：

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

这是一把小提琴-

编辑：

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

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

---

没有你的方法还有别的方法吗？没有你的方法还有别的方法吗？