在自己写demo的过程中 碰到了这样一个问题 发现drawImage方法没有达到预期的效果 图片没办法显示 而fillRect等画图形的方法却工作良好

大概的代码如下：

 

Js代码  

1 $(function() {  2     var $my_canvas=$("#my_canvas");  3     var my_canvas=$my_canvas[0];  4     var context=my_canvas.getContext("2d");  5     // var footprint_img=document.getElementById("footprint");  6     var footprint_img=new Image();  7     footprint_img.src="footprint.jpg";  8     context.drawImage(footprint_img,10,10,20,20);  9 });

在和伙伴交流的情况下 发现在google help下也有人碰到了类似问题

描述了该问题 发现同样的代码在FireFox下工作良好 但是Chrome却无法绘制 并且刷新也无用 不过 如果在地址栏敲一下回车 却可以看到绘制的图片 （震惊）

 

之后请教了几位大神 被告知是由于image加载是异步的 而我在image没有加载完毕时就调用了drawImage造成的（好吧 我刚接触前端 这些东西都不注意 大家别拍脸）

 

于是上网查了关于image预加载的一些方法 最后找到了一篇排版不错 说明也很好的文章（有的文章一看就转来的 也不写转帖 也不重新排版 代码就那么混乱着 完全不想看啊）

别看是百度空间就不看。。觉得说得挺清楚的 特别对于我这样的新手

具体的原理 在上文中已经说了 概括下就是在确保图片加载的情况下再去做相关动作（这是废话，文中更循序渐进）

 

改进后的代码如下：

 

Js代码  

1 $(function() {   2     var $my_canvas=$("#my_canvas");   3     var my_canvas=$my_canvas[0];   4     var context=my_canvas.getContext("2d");   5     // var footprint_img=document.getElementById("footprint");   6     // var footprint_img=new Image();   7     // footprint_img.src="footprint.jpg";   8     preImage("footprint.jpg",function(){   9         context.drawImage(this,10,10,20,20);  10     });  11 });  12   13 function preImage(url,callback){  14      var img = new Image(); //创建一个Image对象，实现图片的预下载  15      img.src = url;  16      17     if (img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数  18          callback.call(img);  19         return; // 直接返回，不用再处理onload事件  20      }  21   22      img.onload = function () { //图片下载完毕时异步调用callback函数。  23          callback.call(img);//将回调函数的this替换为Image对象  24      };  25 }

 

 

转载：

加载图片相关的文章：