在canvas中插入图片

移动版开发中都会建议在canvas中插入图片，那么具体如何操作呢？

本文将用到的html结构如下：

<canvas id="cvs"  width="1024" height="768" style="border:1px solid #ccc;margin:20px auto;display: block;">
        当前浏览器不支持canvas
        <!-- 如果浏览器支持canvas，则canvas标签里的内容不会显示出来 -->
</canvas>

本文将用到的JS代码如下：

<script>
        //获取canvas元素
        var cvs = document.getElementById("cvs");
        //创建image对象
        var imgObj = new Image();
        imgObj.src = "http://images.cnblogs.com/cnblogs_com/html5test/359114/r_test.jpg";
        //待图片加载完后，将其显示在canvas上
        imgObj.onload = function(){
                var ctx = cvs.getContext('2d');
                ctx.drawImage(this, 0, 0);//this即是imgObj,保持图片的原始大小：470*480
                //ctx.drawImage(this, 0, 0,1024,768);//改变图片的大小到1024*768
            }
</script>

上述代码执行效果：

在canvas中插入图片，必须等到图片完全加载后才能对其进行操作，浏览器通常会在页面脚本执行的同时异步加载图片。

如果试图在图片未完全加载之前就将其呈现到canvas上，将不会显示任何图片。如下代码：

<script>
        //获取canvas元素
        var cvs = document.getElementById("cvs");
        //创建image对象
        var imgObj = new Image();
        imgObj.src = "http://images.cnblogs.com/cnblogs_com/html5test/359114/r_test.jpg";
        //待图片加载完后，将其显示在canvas上
        //imgObj.onload = function(){
        var ctx = cvs.getContext('2d');
        ctx.drawImage(this, 0, 0);//this即是imgObj,保持图片的原始大小：470*480   
        //    }
</script>

该代码的效果如下：

图片没有显示的原因就是：在图片未完全加载之前就将其呈现到canvas上，所以要在canvas中插入图片，必须使用的代码结构为：

<script>
        var cvs = document.getElementById("cvs");
        var imgObj = new Image();
        imgObj.src = "http://images.cnblogs.com/cnblogs_com/html5test/359114/r_test.jpg";
        //待图片加载完后，将其显示在canvas上
        imgObj.onload = function(){ //onload必须使用
                var ctx = cvs.getContext('2d');
                ctx.drawImage(this, 0, 0);
        }
</script>