Question

我有这个非常简单的代码来在画布上加载图像。你能告诉我为什么我必须点击两次按钮来加载图像吗？（我使用的是铬）

<!DOCTYPE html>
<html>
    <body>
        <canvas id="c" width="200" height="200"></canvas>
        <script type="text/javascript" src="T4_referencing.js"></script>
        <input id="b" type="button" onclick="display()"></input>
    </body>
</html>

T4_referencing.js

function display(){
    var canvas=document.getElementById("c");
    var ctx=canvas.getContext("2d");

    var im = new Image;
    im.src="T3default200x200.png";

    ctx.drawImage(im,0,0);
}

谢谢！

Answer 1

您需要在图像完全加载后调用drawImage：

im.onload=function() {
    ctx.drawImage(im, 0, 0);
}

它在第二次点击时起作用的原因是图像已被加载（第一次点击请求）并且直接从内存中获取而没有网络延迟。

在这种情况下，为什么我必须单击两次以加载我的图像？

1 个答案: