“ var canvas = document.getElementById（“ canvas”）”不能为全局变量吗？

Question

我做了以下脚本。 当我按下按钮时，单词“ blood”会移动，然后按下按钮，它将停止。

该脚本在Chrome中有效，但是当我将以下脚本移至TOP行时。 （在var flag;之间var flag;和window.setInterval ），发生错误， window.setInterval

未捕获的typeerror无法调用null的方法“ getcontext”

您能解释一下为什么会发生吗？

var canvas = document.getElementById("canvas"), ctx = canvas.getContext("2d");

var y = 100;
var flag = false;

window.onload = setInterval(function(){
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d");


ctx.fillStyle = "black";
ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle = "red";
ctx.font = "50px Helvetica";
ctx.fillText("blood", 200, y);

if(flag){
y++;
}

}, 30);

function start(){
flag = true;
}

function stop(){
flag = false;
}

Answer 1

如果在html主体末尾的script元素中运行代码，则可以确保在DOM准备就绪之前，它不会尝试获取画布上下文。 另外，我对您的代码进行了优化，以缓存DOM查找：

<html>
<head>
    <title>Canvas Scrolling Text</title>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script type="text/javascript">
        var y = 100;
        var flag = false;

        var canvas = document.getElementById("canvas"),
            ctx = canvas.getContext("2d");

        setInterval(function() {
            ctx.fillStyle = "black";
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            ctx.fillStyle = "red";
            ctx.font = "50px Helvetica";
            ctx.fillText("blood", 100, y);

            if(flag)
                y++;
        }, 30);

        function start()
        {
            flag = true;
        }

        function stop()
        {
            flag = false;
        }

        start();
    </script>
</body>

这是一个工作的jsFiddle 。

Answer 2

如果将其从onload函数中移出，则DOM元素（特别是canvas ）尚不存在。 有关DOM内容加载事件的更多信息，请参见https://stackoverflow.com/a/15564394/1370556 。

“ var canvas = document.getElementById（“ canvas”）”不能为全局变量吗？

问题描述

2 个解决方案

解决方案1
1 2014-04-23 19:25:02

解决方案2
0 2014-04-23 19:24:16

“ var canvas = document.getElementById（“ canvas”）”不能为全局变量吗？

问题描述

2 个解决方案

解决方案1 1 2014-04-23 19:25:02

解决方案2 0 2014-04-23 19:24:16

解决方案1
1 2014-04-23 19:25:02

解决方案2
0 2014-04-23 19:24:16