Question

我试图在顶角的画布上显示图像，并且绘图功能无法正常工作。我做错了什么。

enter image description here

上面的图像就是我想要在屏幕上显示的内容。

<html>
<head>
<title></title>
</head>

<body>
<p><canvas id="canvas" style="border:1px solid black;" width="450" height="310"></canvas>
</body>


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


    draw();

    function draw(){  
        var img = new Image(); 
        img.src = "t.gif";  
        ctx.drawImage(img,0,0);  
    }
</script>

</html>

Answer 1

问题是您尝试在浏览器下载完之前立即绘制图像。

请改为尝试：

function draw(){  
    var img = new Image();
    img.onload = function() {
        ctx.drawImage(img,0,0);
    };
    img.src = "t.gif";  
}

Answer 2

你应该在加载后绘制图像

img.onload = function() {
    // here...
};

为什么我的图像没有显示在画布上？

2 个答案: