Object #<HTMLCanvasElement> 的drawImage没有作用的原因

2019独角兽企业重金招聘Python工程师标准>>>

学canvas时候发现了这个问题，情况分析：

1：google版本不支持canvas的drawImage方法，

2：传入参数不正确导致浏览器报错（是由于image加载是异步的，可能没加载完成就开始执行相应的代码，结果资源获取不到）。

3： var canvas = document.getElementById('canvas');
     var context= canvas.getContext('2d');有可能你没有获取2D的上下文，晕，我就是这种，至于第二种情况下面有解答方法。

解决方法：使得图片加载完成后才去运行相关代码

改进后的代码如下(这是网上的代码，还可以)：

Js代码   

1.     var context=my_canvas.getContext("2d");  

2.     // var footprint_img=document.getElementById("footprint");  

3.     // var footprint_img=new Image();  

4.     // footprint_img.src="footprint.jpg";  

5.     preImage("footprint.jpg",function(){  

6.         context.drawImage(this,10,10,20,20);  

       }

7. 
   

8. function preImage(url,callback){  //图片的预下载  

9.      var img = new Image(); //创建一个Image对象，实现图片的预下载  

10.      img.src = url;  

11.      

12.     if (img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数  

13.          callback.call(img);  

14.         return; // 直接返回，不用再处理onload事件  

15.      }  

16.   

17.      img.onload = function () { //图片下载完毕时异步调用callback函数。  

18.          callback.call(img);//将回调函数的this替换为Image对象  

19.      };  

20. }

    总结：至于其它canvas与图片有关的操作（例如：putImageData）如果发现没作用请检查是否是在图片加载完成后调用。

转载于:https://my.oschina.net/wizardpisces/blog/101747