Chinaunix首页 | 论坛 | 博客
  • 博客访问: 307674
  • 博文数量: 206
  • 博客积分: 1040
  • 博客等级: 少尉
  • 技术积分: 1756
  • 用 户 组: 普通用户
  • 注册时间: 2012-04-09 17:22
文章分类

全部博文(206)

文章存档

2015年(3)

2014年(147)

2013年(2)

2012年(54)

我的朋友

分类: HTML5

2015-01-14 11:06:17

http://johncookie.iteye.com/blog/1289982

在自己写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. }  
阅读(397) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~