Question

这是我的HTML

<html>

<head>
    <meta charset="UTF-8" />        
    <script src="script.js"></script>

</head>

....

这是javascript。当我将脚本内联时，一切都很好，但是当我将它移到html文件之外时，它会中断。只是一个简单的html画布绘图但不确定问题。想法？

// Canvas 1

var canvas = document.getElementById("canvas1");
var context = canvas.getContext("2d");

photo = document.getElementById("red");

function drawImage() {
context.drawImage(photo, 0, 0);
}

window.addEventListener("load", drawImage, false);

// Canvas 2
var canvas2 = document.getElementById("canvas2");
var context2 = canvas2.getContext("2d");

context2.fillStyle = "darkRed"; 
context2.fillRect(0, 2, 800, 500);
context2.moveTo(0, 0);
context2.lineTo(400, 300);


// Canvas 3 

var canvas3 = document.getElementById("canvas3");
var context3 = canvas3.getContext("2d");

photo3 = document.getElementById("red2");

function drawImage() {
    for (var x = 0; x < 6; x++) {
        for (var y =0; y < 6; y++ ) {
            context3.drawImage(photo3, x * 100, y * 75, 100, 75);
        }
    }

}

window.addEventListener("load", drawImage, false);

Answer 1

由于您在<head>中加载脚本，因此在加载DOM之前一切都在运行，因此您的所有getElementBuId()调用都失败了。您需要将<script>标记放在<body>的末尾，或者将所有代码放入window.onload函数中，例如

window.onload = function() {
    var canvas = document.getElementById("canvas1");
    var context = canvas.getContext("2d");

    photo = document.getElementById("red");

    function drawImage() {
        context.drawImage(photo, 0, 0);
    }

    window.addEventListener("load", drawImage, false);
    ...
};

这具有不污染全局命名空间的额外好处。

Answer 2

我将继续巴马尔所说的话。一般来说，我在html的末尾加载我的JavaScript以获得更好的性能，所以我相信我不会遇到这个问题。

javascript无法正确链接HTML。怎么修？

2 个答案: