HTML5 canvas問題？

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
B B

但我不確定為什么會得到：
A A
B B
我認為由於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';