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>

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

posted @ 2020-12-30 16:37  刷书狂魔  阅读(296)  评论(0)  编辑  收藏  举报
总访问: counter for blog 次