0

为什么这里的这段代码成功在html5画布上绘制了一个绿色矩形，

<script type="text/javascript">
       function getStart(){
       var canvas = document.getElementById('canvas');

       if (!canvas) {
            alert('Error: Cannot find the canvas element!');
            return;
       }

       if (!canvas.getContext) {
            alert('Error: Canvas context does not exist!');
            return;
       }

       var ctx = canvas.getContext('2d');

       ctx.fillStyle = "#3d3";
       ctx.fillRect(0, 0, 100, 100);
}

getStart();


</script>

虽然这段代码没有......

<script type="text/javascript">           

       var canvas = document.getElementById('canvas');

       if (!canvas) {
            alert('Error: Cannot find the canvas element!');
            return;
       }

       if (!canvas.getContext) {
            alert('Error: Canvas context does not exist!');
            return;
       }

       var ctx = canvas.getContext('2d');

       ctx.fillStyle = "#3d3";
       ctx.fillRect(0, 0, 100, 100);

</script>

首先，代码包含在脚本底部调用的函数中，但我不明白为什么这会有所作为。

4

3 回答 3

2

第二个脚本是否在正文部分和画布标签之后运行？

javascript 在将其加载到 DOM 之前无法使用该标签，因此您必须将脚本部分放在标签之后

于 2013-11-08T09:59:06.860 回答
1

如果您的代码不在函数中，则该return语句将无法工作，因为它没有可返回的内容。他们产生错误

Uncaught SyntaxError: Illegal return statement

或者

SyntaxError: return not in function

（取决于浏览器）

于 2013-11-08T09:56:52.150 回答
0

Internet Explorer 允许通过 ID 引用 HTML 元素。如果页面上有一个 id="canvas" 的 html 元素，IE 将有一个指向该 html 元素的全局变量“canvas”。这可能是问题的原因

在第一种情况下，您在函数内部定义了变量，因此它与全局变量不冲突。在第二种情况下，变量是全局变量，因此您的变量和浏览器创建的变量名称相同，这可能会导致问题。

以上内容是针对 Internet Explorer 的，不得在其他浏览器中引起任何问题。

于 2013-11-08T10:10:40.377 回答