canvas 画布相关问题

问题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
}