为什么HTML5canvas中drawImage()第一次加载只出现最后一个图，刷新就出现问题？

必须等到图片完全加载后才能对其进行 *** 作， 浏览器通常会在页面脚本执行的同时异步加载图片。 如果试图在图片未完全加载之前就将其呈现到canvas 上，将不会显示任何图片. \x0d\x0a\x0d\x0avar img= new Image() \x0d\x0aimg.src = "bark.jpg" \x0d\x0a \x0d\x0a// 图片加载完后，将其显示在canvas 上 \x0d\x0aimg.onload = function () { \x0d\x0adrawCanvas() \x0d\x0a}

方法一：Script Dom Element

(function(){

var scriptEle = document.createElement("script")

scriptEle.type = "text/javasctipt"

scriptEle.async = true

scriptEle.src = "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js"

var x = document.getElementsByTagName("head")[0]

x.insertBefore(scriptEle, x.firstChild)

})()

方法二：onload时的异步加载

function(){

if(window.attachEvent){

window.attachEvent("load", asyncLoad)

}else{

window.addEventListener("load", asyncLoad)

}

var asyncLoad = function(){

var ga = document.createElement('script')

ga.type = 'text/javascript'

ga.async = true

ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'

var s = document.getElementsByTagName('script')[0]

s.parentNode.insertBefore(ga, s)

}

})()

方法三：$(document).ready()

---