其实这三种方法都是一个核心,就是让图片先加载。即图片预加载。但是对于缓存图片，图片预加载还需要解决的是，当页面不刷新时监听缓存图片的问题。
又发现一个问题。。。。首先，背景图画完的样子长这样。
然后好不容易背景图画出来了，我就开开心心的继续吧。
于是我紧接着画了一条红线，为了避免看不到，我还把宽度增加到了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学习大计宜趁早提上日程啊！哈哈哈
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易采站长站。
