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