0

我是使用 jQuery 创建应用程序的新手，但我对 Javascript 非常熟悉。好吧，我想做的是使用 Javascript getElementById 在 html5 画布中绘制图像。我的代码是：

包括 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”。

难道我做错了什么？

4

2 回答 2

3

那应该是：

var canvas = document.getElementById("draw_area");

您的脚本在加载后立即运行该getElementById行，这将失败（由于缺少document.）并阻止页面其余部分上的脚本执行。

这是一个快速演示，向您展示脚本错误如何阻止后续行执行。

一旦修复，正如@swalk 所说，您应该封装该脚本，以便它继续运行document.ready以保持整洁。

于 2011-07-14T00:59:02.987 回答
2

我怀疑这是因为您没有使用 jQuery 的 dom 就绪功能。任何操作/访问 DOM 的 JavaScript 都应该在 DOM 准备好之后完成。即使这不是问题，当人们不熟悉 JavaScript 或 jQuery 时，这也是一个常见的问题。

大多数 jQuery 代码通常在这个准备好的函数中找到：http: //api.jquery.com/ready/。

例如，您的代码应该是：

<script type="text/javascript">
$(document).ready(function() {
  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>
于 2011-07-14T01:00:26.440 回答