Question

我正在尝试关注Mozilla HTML5 Canvas教程here。但是我得到了错误：

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>

我已尝试在canvas元素之前和之后放置脚本，但我没有做任何更改。

有谁知道我做错了什么？

Answer 1

你在这里误用了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事件调用了！： - ）

Answer 2

上述答案的替代方法可能是使用对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>
<!-- ... -->

HTML5 Canvas：未定义绘图

2 个答案: