HTML5 Canvas不在浏览器中显示

时间:2013-03-31 04:29:29

标签: javascript jquery html5

我正在关注this教程,学习使用javascript和jQuery进行HTML5游戏开发。但是,我已经遇到了一个问题。当我运行引用我的js文件的HTML页面时,没有任何内容加载,只是一个空白屏幕。这是两个文件的代码。请注意,我在教程中并没有走得太远。

的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

1 个答案:

答案 0 :(得分:2)

您没有update功能可以拨打电话。当setInterval触发时(脚本加载后约32ms),您将收到错误。

你需要添加jQuery 这是一个为简化HTML工作而编写的库 它需要存在 <{1}}所在的位置

您可以下载自己的副本,也可以链接到网上其他地方的副本 - 两者都可以正常使用。

jQuery使用

test.js作为一个函数来智能地抓取不同类型的项:HTML,JS等,并返回JS对象以及有用的函数来处理你要求的任何内容。

无论如何,$仍然会导致错误,它只是排在第二位,落后于缺失的脚本。