HTML5畫布不在瀏覽器中顯示

我跟隨this教程來學習使用javascript和jQuery的HTML5遊戲開發。不過，我已經遇到了一個問題。當我運行我的js文件被引用的HTML頁面時，什麼都不加載，並且只是一個空白屏幕。這是兩個文件的代碼。請注意，我在教程中沒有得到太多的東西。HTML5畫布不在瀏覽器中顯示

的index.html

<HTML> 
<head> 
</head> 
<body> 
<p>HTML5 and jQuery Tests</p> 
<script type ="text/javascript" src="test.js"></script> 
</body> 
</HTML>

test.js

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'); 
var FPS = 30; 
setInterval(function() { 
update(); 
draw(); 
}, 1000/FPS); 
function draw() { 
canvas.fillStyle = "#000"; 
canvas.fillText("hello.", 50, 50); 
}

任何幫助將不勝感激！另外，我允許在這個論壇上，在同一個線程上提問有關此代碼的問題，還是需要統計另一個代碼？

謝謝！〜Carpetfizz

來源

2013-03-31 Carpetfizz

提及update（）函數 –

您已經添加了任何'jquery.js'。但似乎你已經添加了它的功能。 – 2013-03-31 10:35:59

@silentboy有什麼我必須做的讓瀏覽器知道我使用jquery而不是普通的javascript？瀏覽器不應該足夠聰明來分辨這種差異嗎？ – Carpetfizz

您沒有update函數調用。當setInterval觸發（在腳本加載後約32ms）時，您會收到錯誤消息。

您需要添加jQuery。
這是一個圖書館，是爲了使HTML工作更容易而編寫的。
它需要存在以上其中test.js確實。

您可以下載自己的副本，或鏈接到網上其他地方的副本 - 兩者都可以正常工作。

$被jQuery用作智能獲取不同類型項目的函數：HTML，JS等，並返回JS對象，並帶有有用的函數來處理你所要求的任何東西。

無論如何，update仍然會導致一個錯誤，它只是第二行，在缺少的腳本後面。

來源

2013-03-31 04:35:54 Norguard

啊這是有道理的，但在教程中，我看不到更新功能！這可能是他們編輯時的錯誤還是故意的？另外，update（）函數會是什麼樣子？ – Carpetfizz

@Carpetfizz'function update {/*...*/}'是在列出'setTimeout'的窗口的正下方定義的。它不需要任何東西，現在就工作......它只是需要存在，才能不會崩潰。但基本上，如果你想到一個典型的視頻遊戲，'update'會監聽玩家的移動，更新「空間」中所有事物的位置，計算分數變化，同步在線內容，造成傷害，獎勵點數，計算出如果你擊敗了關卡，做敵人AI等等......'draw'就會畫出所有重新定位的東西，並且紋理並點亮它，等等...... – Norguard

感謝你的回答，但是增加了「function update（）{ }「沒有做任何事情。作爲調試的嘗試，我只需雙擊「」。js「文件，並從」Windows腳本宿主「得到這個錯誤：」Line：4「，」Char：1「，錯誤：」預計對象「，代碼：」800A138F「，來源：」Microsoft JScript運行時錯誤「 – Carpetfizz

HTML5畫布不在瀏覽器中顯示

回答

相關問題