问题1.js在html前执行
问题2.canvas draw图时空图/图片显示不出来
原因:图片未加载完就开始执行ctx.drawImage(…)了
解决方案:将操作放入img.onload()中,等图片加载完触发
img.onload=function(){
//to do
}
img.src=src
问题3:img.onload 不执行
解决方案:img.src 要放在img.onload后
原因:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FbGT9CuF-1618542538204)(C:\Users\cpzx\AppData\Roaming\Typora\typora-user-images\1602730496190.png)]
来自:
问题4:如何清空画布/未清理画布利用同一canvas重画多张图时图片显示不全
解决方案:重设canvas时尺寸会自动清空画布
canvas.width=img.width
问题5:循环绘制多张图时,img.onload顺序不可控(js异步问题)
解决方案:因为不会异步async/await,所以采用了”回调炼狱“解决方案,形式如下:
img1.onload(
//to do img1
img2.onload(
//to do img2
img3.onload(
...
)
)
)
递归函数实现:
digui(i,list_len,list,digui){
if(i==list_len){}
var canvas = document.createElement("canvas")
var ctx = canvas.getContext('2d')
var img=new Image()
img.onload=function(){
canvas.width = img.width
canvas.height = img.height
ctx.drawImage(img, 0, 0)
//to do 绘制第i张图
digui(i+1,list_len,list,digui)
}
img.src=list[i].img_url
}