2011-03-10 106 views
2

我有幾個關於HTML5-Canvas代碼的問題,如下所示。HTML5,Canvas和FireFox

  1. 文本不會出現在Firefox 3.6(它出現在瀏覽器。)
  2. 關於CTX變量(CTX = c.getContext( 「2D」)),應該變量被重新使用反覆在同一個畫布上創建額外的矩形,形狀等,還是需要爲新的矩形,線條等創建新的上下文變量? (這似乎是雙向的,但我不明確什麼是標準的做法。)

<!DOCTYPE html> 
<html lang="en"> 
<body> 

<canvas id="myCanvas" width="400" height="350"> 
Your browser does not support the canvas element. 
</canvas> 

<script type="text/javascript"> 

    var c = document.getElementById("myCanvas"); 
    ctx = c.getContext("2d"); 


    ctx.lineWidth = 5; 
    ctx.strokeStyle="black";  
    ctx.strokeRect(10,10,180,75);  

    ctx.textBaseline = 'Top'; 
    ctx.font   = '20px Sans-Serif'; 
    ctx.fillStyle = 'blue'; 
    ctx.fillText ("hello", 30, 50); 

</script> 

</body> 
</html> 

回答

2

的問題似乎是與您的來電textBaseline。
在的jsfiddle擺弄它,似乎這是區分大小寫的...嘗試使它小寫:ctx.textBaseline = 'top'

保存小提琴爲你鏈接:http://jsfiddle.net/NG8Yf/

+0

那固定的文本問題。非常感謝你! – 2011-03-10 18:31:46

+0

也有一些建議,使用螢火蟲控制檯調試您的HTML5 javascript ...我發現,以便它從很多頭痛救了我! – espais 2011-03-10 21:19:28

+0

@John R:如果這對你有用,也別忘記標記爲已接受 – espais 2011-03-11 13:58:40