为什么Javascript代码在底部而不是顶部工作？_Javascript_Html_Canvas

为什么Javascript代码在底部而不是顶部工作？

javascript html canvas

为什么Javascript代码在底部而不是顶部工作？,javascript,html,canvas,Javascript,Html,Canvas,这对我来说是一个有趣的问题。如果我在页眉部分的页面顶部有代码，下面的代码将起作用。但是如果我把代码放在页面底部，代码就不会工作。这是为什么。我应该能够移动代码，它的工作原理应该和我想的一样。因为Java脚本位于头部上方时，它将检查页面是否加载了操作侦听器。因此，如果我把它放在页面脚本的底部，它将首先加载页面，然后运行脚本代码我想把它放在页面底部，看看它在页面底部的工作方式。我应该能够使用带有脚本的加载操作取出操作侦听器代码：代码工作： <!doctype html> <h

这对我来说是一个有趣的问题。如果我在页眉部分的页面顶部有代码，下面的代码将起作用。但是如果我把代码放在页面底部，代码就不会工作。这是为什么。我应该能够移动代码，它的工作原理应该和我想的一样。因为Java脚本位于头部上方时，它将检查页面是否加载了操作侦听器。因此，如果我把它放在页面脚本的底部，它将首先加载页面，然后运行脚本代码

我想把它放在页面底部，看看它在页面底部的工作方式。我应该能够使用带有脚本的加载操作取出操作侦听器

代码：

代码工作：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ch2Ex9 Rotation Transformation #3</title>
<script type="text/javascript">
window.addEventListener('load', eventWindowLoaded, false);  

function eventWindowLoaded() {
    canvasApp();
}

function canvasApp(){
    var theCanvas = document.getElementById('canvas');
    if (!theCanvas || !theCanvas.getContext) {
            return;
    }

    var context = theCanvas.getContext('2d');

    if (!context) {
        return;
    }

    function drawScreen() {

        //draw black square
        context.fillStyle = "black";
        context.fillRect(20,20 , 25, 25);

        //now draw a red square
        context.setTransform(1,0,0,1,0,0);
        var angleInRadians =45 * Math.PI / 180;
        var x=100;
        var y=100;
        var width=50;
        var height=50;
        context.translate(x+.5*width, y+.5*height);
        context.rotate(angleInRadians);
        context.fillStyle = "red";
        context.fillRect(-.5*width,-.5*height , width, height);
    }

drawScreen(); 
}

</script> 
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
    <canvas id="canvas" width="500" height="500">
         Your browser does not support the HTML 5 Canvas. 
    </canvas>
</div>
</body>
</html>

底部代码在底部示例中工作，这是因为它首先检查并加载页面，然后运行脚本。我应该能够将其移动到HTML页面的底部，删除检查页面负载的代码，并在脚本语言的底部调用我的两个方法。

不知道我在这里是否陈述了显而易见的内容，但您的顶部代码您已经在头部留下了结束标记，并且它在下面的脚本末尾丢失了。把它从页眉上去掉并添加到页面的末尾对我来说都很好。正如你所知，我在F12浏览器的控制台上看到了这个

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ch2Ex9 Rotation Transformation #3</title>
<script type="text/javascript">
window.addEventListener('load', eventWindowLoaded, false);  

function eventWindowLoaded() {
    canvasApp();
}

function canvasApp(){
    var theCanvas = document.getElementById('canvas');
    if (!theCanvas || !theCanvas.getContext) {
            return;
    }

    var context = theCanvas.getContext('2d');

    if (!context) {
        return;
    }

    function drawScreen() {

        //draw black square
        context.fillStyle = "black";
        context.fillRect(20,20 , 25, 25);

        //now draw a red square
        context.setTransform(1,0,0,1,0,0);
        var angleInRadians =45 * Math.PI / 180;
        var x=100;
        var y=100;
        var width=50;
        var height=50;
        context.translate(x+.5*width, y+.5*height);
        context.rotate(angleInRadians);
        context.fillStyle = "red";
        context.fillRect(-.5*width,-.5*height , width, height);
    }

drawScreen(); 
}

</script> 
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
    <canvas id="canvas" width="500" height="500">
         Your browser does not support the HTML 5 Canvas. 
    </canvas>
</div>
</body>
</html>