Question

html canvas ctx.drawImage图层问题

img1.onload=function(){ ctx.drawImage(img1);｝
img2.onload=function(){ ctx.drawImage(img2);｝
img3.onload=function(){ ctx.drawImage(img3);｝
img1为本地图片背景，img2、img3为网络图片做图标闪一下就不见了，貌似先画2、3，然后画1覆盖了，调整代码顺序无效。

Answer 1

这个可能是加载的问题, img1图片比较大, 加载比较大, 所以加载完成后再drawImage, 就覆盖了img2和img3, 可以等所有图片都下载完成后, 再一块儿绘制, 代码如下;

img1.onload = drawImage;
img2.onload = drawImage;
img3.onload = drawImage;
function drawImage(){
    if(img1.complete && img2.complete && img3.complete){
        ctx.drawImage(img1,0,0);
        ctx.drawImage(img2,0,0);
        ctx.drawImage(img3,0,0);
    }
}