Question

为什么此代码在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>

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

Answer 1

第二个脚本是否在body部分和canvas标签之后运行？

javascript无法使用该标记，直到它将被加载到DOM中，因此您必须将您的脚本部分放在标记之后

Answer 2

如果您的代码不在函数中，则return语句无法正常工作，因为它无法返回。它们会产生错误

Uncaught SyntaxError: Illegal return statement

或

SyntaxError: return not in function

（取决于浏览器）

Answer 3

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

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

以上所有内容都是针对Internet Explorer的，不得在其他浏览器中造成任何问题。

Javascript只能在被调用的函数中工作

3 个答案: