大概顺序是这样的：
| <img src=""> window.onload = function(){ drawImage } |
如果不是在html结构中插入的图片，就被我的粗心绕过了这个限制:
图片作为一个资源请求，在js中加载时，自然也会有一个图片加载的时间。
但是因为没有限制，极大的情况是当图片还没有加载完毕就调用了drawImage，此方法他是不起作用的。
解决：
那有没有好的方法解决因图片加载顺序导致drawImage绘图失败的情况呢？
我总结了以下三种方法：
1. 标签+window.onload
| <img src=""> window.onload = function(){ context.drawImage() } |
这种做法解决的核心是onload，将图片和drawImage分开加载，img先加载，确保加载完毕以后再使用绘图
1-2. 后期插入标签？是否可行
有一种情况是,使用截图功能时,也可以用drawImage,而截图又不不是截自己既有的图片,而是用一个图片的地址当参数.
我想这种的就需要js来创建一个img,并将地址赋给它.然后生成图片再来截图了
| var myImg = document.createElement('img'); myImg.src = '///'; document.body.appendChild(myImg); ctx1.drawImage(myImg,0,0,wWidth,wHeight); |
不想加多余的标签？必要像下边这样用js来new一个image对象？
| var bgImg = new Image(); bgImg.src = 'images/background.jpg'; |
前边说了，这种使用 new Image() 创建的图片，需要给图片缓冲的时间。等图片加载成功后才可以进行绘制。
图片对象是准备好了,但你怎么知道图片什么时候真的加载完成呢?好，还有办法：
js任务执行中，你嫌我离你执行的时间太近是不，那把我单独拎出来重新排队，等会再执行可以否？
2. 定时器异步实现
| setTimeout(function(){ ctx1.drawImage(bgImg,0,0,wWidth,wHeight); },10) |
这里为什么延迟写了10，没写大家熟悉的1000或者0呢？
因为在我的特定wifi环境特定台式机电脑的测试下，10能在图片加载完后刚好图片出来，而不像0那样不出来，也不想1000那样等半天出来。
可是试想一下，换一个更大的图，这个10还适用吗？wifi换成2g这个10还适用吗?
所以，定时器的缺点就是，不能保证时间到了以后图片已经加载进来了，网不快的话照样挂掉。
3. img.onload
window.onload给了我们思路,直接监听他加载完成不可以了嘛
使用img的加载事件，监听图片加载成功后，再执行canvas的绘图效果.并且这种方法靠谱一些。
