HTML5 canvas里的drawImage用法

关于canvas无法通过drawImage加载的原因

首先我们先来理解在html里图片的加载时是异步的。

（设置src本身是同步的，但是浏览器下载和显示图片是异步的。）

在资源还没有加载完成的时候就执行了drawImage

所以无法成功加载到画布当中。

因为图片是异步加载，

所以要加个onload事件

onload 事件会在页面或图像加载完成后立即发生。

先看正确代码：

    <p>要使用的图片:</p>

    <img id="scream" src="img_the_scream.jpg">

    <p>画布:</p>

    <canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">

        您的浏览器不支持 HTML5 canvas 标签。

    </canvas>

    <script>
        var c = document.getElementById("myCanvas");

        var ctx = c.getContext("2d");
        var img = document.getElementById("scream");

        img.onload = function ()

        {

            ctx.drawImage(img, 10, 10);

        }
    </script>

</body>

另一种写法