在自己写demo的过程中 碰到了这样一个问题 发现drawImage方法没有达到预期的效果 图片没办法显示 而fillRect等画图形的方法却工作良好
大概的代码如下：
Js代码
- $(function() {
- var $my_canvas=$("#my_canvas");
- var my_canvas=$my_canvas[0];
- var context=my_canvas.getContext("2d");
- // var footprint_img=document.getElementById("footprint");
- var footprint_img=new Image();
- footprint_img.src="footprint.jpg";
- context.drawImage(footprint_img,10,20,20);
- });
在和伙伴交流的情况下 发现在google help下也有人碰到了类似问题
http://www.google.com/support/forum/p/Chrome/thread?tid=29d98538241bc15f&hl=en
描述了该问题 发现同样的代码在FireFox下工作良好 但是Chrome却无法绘制 并且刷新也无用 不过 如果在地址栏敲一下回车 却可以看到绘制的图片 （震惊）
之后请教了几位大神 被告知是由于image加载是异步的 而我在image没有加载完毕时就调用了drawImage造成的（好吧 我刚接触前端 这些东西都不注意 大家别拍脸）
于是上网查了关于image预加载的一些方法 最后找到了一篇排版不错 说明也很好的文章（有的文章一看就转来的 也不写转帖 也不重新排版 代码就那么混乱着 完全不想看啊）
http://apps.hi.baidu.com/share/detail/24712354
别看是百度空间就不看。。觉得说得挺清楚的 特别对于我这样的新手
具体的原理 在上文中已经说了 概括下就是在确保图片加载的情况下再去做相关动作（这是废话，文中更循序渐进）
改进后的代码如下：
// var footprint_img=new Image();
// footprint_img.src="footprint.jpg";
preImage("footprint.jpg",function(){
context.drawImage(this,250)"> });
});
function preImage(url,callback){
var img = new Image(); //创建一个Image对象，实现图片的预下载
img.src = url;
if (img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数
callback.call(img);
return; // 直接返回，不用再处理onload事件
}
img.onload = function () { //图片下载完毕时异步调用callback函数。
callback.call(img);//将回调函数的this替换为Image对象
};
}
