“var canvas = document.getElementById(”canvas“)”“不能是全局变量?

时间:2014-04-23 19:09:33

标签: javascript html5 canvas

我制作了以下脚本。当我按下按钮时,单词" blood"移动,按下按钮停止。

此脚本适用于Chrome,但是当我将以下脚本移至TOP行时。 (在var flag;window.setInterval之间),发生错误

  

未捕获的类型错误无法调用方法' getcontext' of null"

你会解释为什么会这样吗?

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;
}

2 个答案:

答案 0 :(得分:1)

如果在html主体末尾的脚本元素中运行代码,则可以确保在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

答案 1 :(得分:0)

如果您将其移出onload函数,则DOM元素(特别是您的canvas)尚未存在。有关DOM内容加载事件的更多信息,请参阅https://stackoverflow.com/a/15564394/1370556