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画布不在浏览器中显示

回答

相关问题