javascript - HTML5 Canvas 不显示在浏览器中

标签 javascript jquery html

我正在关注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>

测试.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);
}

任何帮助将不胜感激!另外,我是否可以在本论坛的同一个线程中提出有关此代码的问题,或者我是否必须另外声明?

谢谢! 〜地毯嘶嘶声

最佳答案

您没有要调用的更新函数。当 setInterval 触发时(脚本加载后大约 32 毫秒),您会收到错误。

您需要添加 jQuery。
它是一个库,旨在使 HTML 的使用变得更加容易。
它需要存在于 test.js 所在的上方

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

$ 被 jQuery 用作一个函数来智能地获取不同类型的项目:HTML、JS 等,并返回带有有用函数的 JS 对象,以处理您所要求的任何内容。

无论如何,更新仍然会导致错误,它只是第二个,位于丢失的脚本后面。

关于javascript - HTML5 Canvas 不显示在浏览器中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15726349/

相关文章:

javascript - 选择过滤器无法正常工作,Angular js ng-options

javascript - React + Electron webview标签预加载js不起作用

javascript - 如何使用 D3js 围绕圆形路径绘制圆圈

javascript - jQuery 淡入淡出在 Google Chrome 中无法正常工作

javascript - knockout JS : foreachBinding

javascript - <选项> 的图像在 IE 中不起作用

javascript - 向下滚动页面时需要显示标题行

jquery - 在 Bootstrap 中停止移动设备上的静态固定滚动条行为

html - 使用显示时 Google map 被裁剪 :Inherit;

javascript - 使用 jquery、javascript 防止回发