HTML5之canvas绘制图片

在使用HTML的canvas显示图片时，我才发觉情况没我想法的那么简单，我原先的代码是这样子的，

var canvas = document.getElementById('myCanvas');
         var ctx = canvas.getContext('2d');
          var pl = new Image();
         pl.src = "../image/default.JPG";
         ctx.drawImage(pl, 0, 0);

此种方法是不能够绘制图像的（各浏览器会有差异），其原因在于，我们可能在图片尚未请求或是加载到内存完毕的时候就调用了画图的方法，这是图片尚未加载完毕，当然绘制是不能够成功的。

下面贴出解决的方案。

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对象
         };
     }

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
 preImage("../image/default.JPG", function () {
             ctx.drawImage(this, 0, 0);
         });

此种方式才能够绘制成功。

此种解决方案出自http://apps.hi.baidu.com/share/detail/24712354，这哥们写的挺详细的，我也没细看，大家遇到什么问题可以看看。