基本JS/HTML5畫布問題

我對JS和HTML5非常陌生，我無法獲得一個非常基本的代碼片段。我製作了畫布，將其附加到身體上，並試圖寫出文字，但沒有出現。基本JS/HTML5畫布問題

<!doctype html> 
<html lang="en"> 
    <head> 
     <meta charset='utf-8'> 
     <title>Test Game</title> 
    </head> 
    <body> 
     <script type="text/javascript"> 
      var CANVAS_WIDTH=480; 
      var CANVAS_HEIGHT=320; 
      var canvasElement=$("<canvas width='"+ CANVAS_WIDTH +"'height='"+CANVAS_HEIGHT+"'></canvas>"); 
      var canvas = canvasElement.get(0).getContext("2d"); 
      canvasElement.appendTo('body'); 
     </script> 
     <script type="text/javascript"> 
      var FPS = 30; 
      setInterval(function(){ 
       update(); 
       draw(); 
      },1000/FPS); 
      function update(){ 

      } 
      function draw(){ 
       canvas.fillStyle = "#000";//Sets colour to black 
       canvas.fillText("Sup Bro!",50,50); 
      } 
     </script> 
    </body> 
</html>

來源

2013-11-29 Josh

您應該使用developertools（FireFox的FireBug），然後你會看到類似「$不是一個函數」 ...... @AndreasBjørn是沒有錯的使用jQuery在這裏創建一個新的dom元素。 –

@ LJ_1102謝謝，刪除我的評論，以避免混淆他人後來:) –

您之前沒有包含jQuery核心腳本，這就是它失敗的原因。另外，我建議使用jQuery函數來添加屬性，而不是使用字符串。

<!doctype html> 
<html lang="en"> 
    <head> 
     <meta charset='utf-8'> 
     <title>Test Game</title> 
     <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
    </head> 
    <body> 
     <script type="text/javascript"> 
      var CANVAS_WIDTH = 480; 
      var CANVAS_HEIGHT = 320; 
      var canvasElement = $("<canvas>") 
       .attr('width', CANVAS_WIDTH) 
       .attr('height', CANVAS_HEIGHT); 

      var canvas = canvasElement.get(0).getContext("2d"); 
      canvasElement.appendTo('body'); 

      var FPS = 30; 
      setInterval(function() { 
       update(); 
       draw(); 
      }, 1000/FPS); 
      function update() { 
      } 
      function draw() { 
       canvas.fillStyle = "#000"; // Sets colour to black 
       canvas.fillText("Sup Bro!", 50, 50); 
      } 
     </script> 
    </body> 
</html>

來源

2013-11-29 02:04:32

謝謝！我真的是這樣的新手，所以很高興有一個快速友好的迴應！ – Josh

@Josh：不客氣。當你有時間時，如果你看看[關於]頁面，那就太好了。請注意，jQuery只是一個JavaScript庫，它不是JavaScript本身的一部分。 –

除了畫布，你需要用attr設置寬度和高度，或者只設置它的css尺寸，這對canvas不起作用：'.attr（'width'，CANVAS_WIDTH）;'等等 – K3N

我也在學習HTML5。就像前面的人說的，你使用jQuery（$）而不包括庫。

另外，從我所瞭解到的情況來看，我認爲最好使用requestAnimationFrame（https://developer.mozilla.org/en/docs/Web/API/window.requestAnimationFrame）而不是setInterval。如果您希望設置FPS，您可以在繪製循環中添加一個條件來檢查是否是繪製下一幀的時間。

function draw(timestamp) { 
    requestAnimationFrame(draw); 
    if (timestamp - lasttimestamp > 1000/framerate) { 
     lasttimestamp = timestamp - ((timestamp - lasttimestamp) % 1000/framerate; 
     // ... put your drawing code in here 
    } 
}

來源

2013-11-29 02:13:26 Hans

+1如果你正在做動畫'requestAnimationFrame'比使用setInterval/setTimeout更有效率，並且更精確。 –

基本JS/HTML5畫布問題

回答

相關問題