Question

据我所知，我的代码与W3schools上的代码完全一样，除了我创建一个新的图像而不是使用已经在html中的代码，但我不能让它显示任何东西

<body>
<center><canvas id="myCanvas" width="1000" height="750"></canvas></center>
<script>
    function newImage(src, width, height) {
            var img = document.createElement("img");
            img.src = src;
            img.width = width;
            img.height = height;
            return img;
        }   

    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var i = newImage("http://i.imgur.com/ELsS4mN.jpg", 1000, 750);
    ctx.drawImage(i,0,0);
</script>

Answer 1

出现问题是因为在完全下载之前返回图像对象。因为画布无法将图像数据渲染为背景图像。

只有在图像数据完全可用时，才应使用onload回调函数和drawImage。这应该有效：

function newImage(src, width, height, callback) {
    var img = new Image();
    img.width = width;
    img.height = height;
    img.onload = function () {
        callback(img);
    };
    img.src = src;
}

var c = document.getElementById("myCanvas"),
    ctx = c.getContext("2d");

newImage("http://i.imgur.com/ELsS4mN.jpg", 1000, 750, function(image) {
    ctx.drawImage(image, 0, 0);
});

请注意，如果不是从newImage函数返回图像，而是在其中传递回调函数，并在下载完成后调用它。

    function newImage(src, width, height, callback) {
        var img = new Image();
        img.width = width;
        img.height = height;
        img.onload = function () {
            callback(img);
        };
        img.src = src;
    }
    
    var c = document.getElementById("myCanvas"),
        ctx = c.getContext("2d");

    newImage("http://i.imgur.com/ELsS4mN.jpg", 1000, 750, function(image) {
        ctx.drawImage(image, 0, 0);
    });

<canvas id="myCanvas" width="1000" height="750"></canvas>

我在HTML Canvas中显示来自URL的图像时遇到问题

1 个答案: