HTML画布图像未显示

Question

这是代码：

<head>
    <title>Canvas</title>
</head>

<body>
    <canvas id="c" width="200" height="200">
    </canvas>

    <script>
        var c = document.querySelector("#c");
        var ctx = c.getContext("2d");

        var image = new Image();

        image.onLoad = function() {
            console.log("Loaded Image");
            ctx.drawImage(image, 0, 0, c.width, c.height);
        };

        image.src = "fry_fixed.jpg";
    </script>
</body>

画布正在创建中。 图像没有出现。 我试图调试它，发现onLoad函数不起作用。 我可以确保您的图像位于同一文件夹中，并且图像名称正确无误。 但我仍然无法弄清楚为什么代码不工作！

Answer 1

案件很重要，它是onload ，全是小写，不是onLoad

image.onload = function() {...

或者更现代的addEventListener

image.addEventListener('load', function() {...}, false);

Answer 2

使用onload而不是onLoad 。 或者甚至更好，使用事件监听器！

 var c = document.querySelector("#c"); var ctx = c.getContext("2d"); var image = new Image(); // Better use addEventListener, to be honest. // image.onload = function() { // ctx.drawImage(image, 0, 0, c.width, c.height); // }; image.addEventListener('load', function(){ ctx.drawImage(image, 0, 0, c.width, c.height); }, false) image.src = "http://placehold.it/200x200"; 

 <canvas id="c" width="200" height="200"></canvas>