在canvas中插入图片

来源：互联网发布：打考勤软件编辑：程序博客网时间：2024/05/29 08:32

移动版开发中都会建议在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>

0 0