在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>
发布了20 篇原创文章 · 获赞 9 · 访问量 10万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览