所以，定时器的缺点就是，不能保证时间到了以后图片已经加载进来了，网不快的话照样挂掉。
3. img.onload
window.onload给了我们思路,直接监听他加载完成不可以了嘛
使用img的加载事件，监听图片加载成功后，再执行canvas的绘图效果.并且这种方法靠谱一些。
bgImg.onload = function(){
console.log('图片加载成功');
console.log(this);
ctx1.drawImage(bgImg,0,0,wWidth,wHeight);
}其实这三种方法都是一个核心,就是让图片先加载。即图片预加载。但是对于缓存图片，图片预加载还需要解决的是，当页面不刷新时监听缓存图片的问题。
又发现一个问题。。。。首先，背景图画完的样子长这样。
然后好不容易背景图画出来了，我就开开心心的继续吧。
于是我紧接着画了一条红线，为了避免看不到，我还把宽度增加到了20：
bgImg.onload = function(){
ctx1.drawImage(bgImg,0,0,wWidth,wHeight);
}
/* 绘制红线如下： */
ctx1.beginPath();
ctx1.moveTo(10,wHeight);
ctx1.lineTo(10,wHeight-100); ctx1.lineWidth = 20;
ctx1.strokeStyle = 'red';
ctx1.stroke();
ctx1.closePath();
但我F5按下依旧没有变化，还是看不到红线。
找了半天直到我把背景图关掉才看到：
啊，原来他被背景图盖住啦！
可是，为什么呢？
我在想有两种可能
1、层级问题
2、先后问题
关于1，就像css的z-index那种感觉，是背景图在上盖住了红线。难道说背景图的层级比红线高？
这个设想我没法测试，于是放弃进行第二种可能的揭秘。
可是为什么背景图会在上呢？是因为背景图后画？
这个可以最简便的通过console.log()打印观察执行顺序
原来“罪魁祸首”竟然是onload这个回调。他跟定时器一样，都是一个异步任务。自然排在了同步任务（下边的绘制线条）的后边
所以前边看似是一个很好的解决方法——onload，在这里也暴露了他的弊端。
很好、看来，promise学习大计宜趁早提上日程啊！哈哈哈
