[英]HTML5 Canvas not displaying in browser
I'm following this tutorial to learn HTML5 game development using javascript and jQuery. 我正在按照本教程学习使用javascript和jQuery进行HTML5游戏开发。 However, I've already come across a problem. 但是,我已经遇到了一个问题。 When I run the HTML page that my js file is referenced from, nothing loads, and is just a blank screen. 当我运行引用我的js文件的HTML页面时,没有任何内容加载,只是一个空白屏幕。 Here is the code for both files. 这是两个文件的代码。 Note that I haven't gotten very far in the tutorial. 请注意,我在教程中并没有走得太远。
index.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 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);
}
Any help would be greatly appreciated! 任何帮助将不胜感激! Also, am I allowed to ask questions about this code in this forum, on the same thread, or do I have to stat another? 另外,我可以在这个论坛上,在同一个帖子上提出有关此代码的问题,或者我是否需要统计另一个?
Thanks! 谢谢! ~Carpetfizz 〜Carpetfizz
You don't have an update
function to call. 您没有可以调用的update
功能。 When the setInterval
fires (which is ~32ms after the script loads), you're getting an error. 当setInterval
触发时(脚本加载后大约32ms),您将收到错误。
You need to add jQuery. 你需要添加jQuery。
It's a library that was written to make working with HTML easier. 这是一个编写的库,可以更轻松地使用HTML。
It needs to exist above where test.js
does. 它需要存在于 test.js
所在的位置test.js
。
You can either download your own copy of it, or link to a copy elsewhere on the net - both will work fine. 您可以下载自己的副本,也可以链接到网上其他地方的副本 - 两者都可以正常工作。
$
is used by jQuery as a function to intelligently grab different kinds of items: HTML, JS, etc, and return JS objects with helpful functions for working with whatever you asked for. $
被jQuery用作智能地抓取不同类型的项目的函数:HTML,JS等,并返回JS对象以及有用的函数来处理您要求的任何内容。
Anyway, the update
would still have caused an error, it was just second in line, behind the missing script. 无论如何, update
仍然会导致错误,它只是排在第二位,在缺失的脚本后面。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.