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>

正在创建Canvas。图像没有出现。我试图调试它，发现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>

HTML画布图像未显示

2 个答案: