我们知道canvas画好几张图片时,按我们的思维应该是先画的在下面,后画的在最上面,可是事实不是这样的,细心的人会发现,叠层关系是随机的。
为什么呢?
这样想,我们画图片时是不是有这段代码
img.onload=function(){ ctx.drawImage(img,x,y); }
其实就是这段代码的问题,我们先分析一下这段代码,其意思是图片加载完成之后再把它画到我们的画布上,
好几张图片时,由于图片的加载的时间不一样,先加载完的先画,后加载完的后画,所以就会形成图片在画布上显示的叠层顺序和我们实际代码画的顺序由不一样,
如果要想按照我们想要的叠层顺序画在画布上,那么解决办法就是加延时器,最下面的不用加延时器,按照顺序最上面的,延时器的延时时间越长。
特别申明,本人在近期会写一个关于canvas的全部教程,会分为若干期,如有需要的实时关注!
时间: 2024-10-08 15:28:43