我是使用 jQuery 创建应用程序的新手，但我对 Javascript 非常熟悉。好吧，我想做的是使用 Javascript getElementById 来在 html5 canvas 中绘制图像。我的代码是:
包括 jQuery 和 JQuery mobile:
<link rel="stylesheet" type="text/css" href="lib/jquery.mobile-1.0b1.min.css" />
<script type="text/javascript" src="lib/jquery-1.6.1.js"></script>
<script type="text/javascript" src="lib/jquery.mobile-1.0b1.min.js"></script>
有问题的代码:
<div data-role="content">
<!--//TO DO canvas drawing-->
<canvas id="draw_area" width="295px" height = "390px"></canvas>
...
<script type="text/javascript">
var canvas = getElementById("draw_area");
var context = canvas.getContext('2d');
var map = new Image();
map.src = "./imgs/home_screen1.png";
map.onload = function (){
context.drawImage (map, 0, 0);
};
</script>
我还注意到我无法使用
<body onload = "aFunction();">
不是任何其他 Javascript 事件，例如“onclick”。
我做错了什么吗？
最佳答案
应该是:
var canvas = document.getElementById("draw_area");
您的脚本在加载后立即运行 getElementById 行，该行失败(由于缺少 document.)并阻止其余部分上的脚本您的页面将不再执行。
Here's a quick demo向您展示脚本错误将如何阻止后续行的执行。
一旦解决了这个问题，正如 @swalk 所说，您应该封装该脚本，以便它在 document.ready 上运行保持一切整洁。
关于javascript - 如果我使用 jQuery，JavaScript 事件是否有效？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6687334/