HTML5 canvas元素无法绘制图片的问题

问题：

在学习HTML5的canvas元素时，我写了如下代码打算将图片绘制到画布：

<body>
    <canvas id="canvas" height="1000" width="1000"></canvas>
</body>

<script type="text/javascript">
    var canvas = document.getElementById("canvas");
    var cxt = canvas.getContext("2d");
    var img = new Image();
    img.src = "../resourse/cat.jpg";
    cxt.drawImage(img, 0, 0);
</script>

但是图片一直无法显示出来。

解决方案

经查阅资料，代码应该这么写：

<body>
    <canvas id="canvas" height="1000" width="1000"></canvas>
</body>

<script type="text/javascript">
    var canvas = document.getElementById("canvas");
    var cxt = canvas.getContext("2d");
    var img = new Image();
    img.src = "../resourse/cat.jpg";
    img.onload = function(){          # drawImage()函数应卸载onload中
        cxt.drawImage(img, 0, 0);
    }
</script>

如此一来，图片正常显示。

CS专业在读，热爱编程。
专业之外，喜欢阅读，尤爱哲学、金庸、马尔克斯。