0

我正在尝试按照此处的 Mozilla HTML5 Canvas 教程进行操作。但我得到了错误：

Uncaught ReferenceError: draw is not defined

我有这样的脚本：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

 <script type="application/javascript">
$(function() {

function draw() {
      var canvas = document.getElementById("main");
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");

        ctx.fillStyle = "rgb(200,0,0)";
        ctx.fillRect (10, 10, 55, 50);

        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
        ctx.fillRect (30, 30, 55, 50);
      }
    }


});

</script>


</head>
 <body onload="draw();">
   <canvas id="main" width="150" height="150"></canvas>


</body>

我已经尝试在画布元素之前和之后放置脚本，但我没有得到任何改变。

有谁知道我做错了什么？

4

2 回答 2

2

您在这里误用了 jQuery。现在您的 draw() 方法仅在 jQuery 调用的 ready() 方法中可用（并已声明）。使函数全局化，并跳过 jQuery 部分。

 <script type="text/javascript">
   function draw() {
      var canvas = document.getElementById("main");
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");

        ctx.fillStyle = "rgb(200,0,0)";
        ctx.fillRect (10, 10, 55, 50);

        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
        ctx.fillRect (30, 30, 55, 50);
      }
  }
</script>

您会看到$(function(){ ... });是 的简写$(document).ready()，它在所有 DOM 元素都加载时用作回调。在你的情况下不需要，因为你的 draw() 方法是由 body onload 事件调用的！:-)

于 2013-07-29T11:09:55.647 回答
1

上述答案的替代方法可能是使用内联调用退出draw()并删除函数头，以便它在加载时直接进入它。

<script type="application/javascript">
$(function() {
      var canvas = document.getElementById("main");
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");

        ctx.fillStyle = "rgb(200,0,0)";
        ctx.fillRect (10, 10, 55, 50);

        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
        ctx.fillRect (30, 30, 55, 50);
      }
});
</script>

然后你的身体将被释放：

<body>
<canvas id="main" width="150" height="150"></canvas>
<!-- ... -->
于 2013-07-29T11:15:04.103 回答