canvas画好几张图片时,叠层关系的问题

简介: 我们知道canvas画好几张图片时,按我们的思维应该是先画的在下面,后画的在最上面,可是事实不是这样的,细心的人会发现,叠层关系是随机的。 为什么呢? 这样想,我们画图片时是不是有这段代码 img.onload=function(){ ctx.drawImage(img,x,y); } 其实就是这段代码的问题,我们先分析一下这段代码,其意思是图片加载完成之后再

我们知道canvas画好几张图片时,按我们的思维应该是先画的在下面,后画的在最上面,可是事实不是这样的,细心的人会发现,叠层关系是随机的。

为什么呢?

这样想,我们画图片时是不是有这段代码

img.onload=function(){
			ctx.drawImage(img,x,y);   	
		}
其实就是这段代码的问题,我们先分析一下这段代码, 其意思是图片加载完成之后再把它画到我们的画布上

好几张图片时,由于图片的加载的时间不一样,先加载完的先画,后加载完的后画,所以就会形成图片在画布上显示的叠层顺序和我们实际代码画的顺序由不一样,

如果要想按照我们想要的叠层顺序画在画布上,那么解决办法就是加延时器,最下面的不用加延时器,按照顺序最上面的,延时器的延时时间越长。


特别申明,本人在近期会写一个关于canvas的全部教程,会分为若干期,如有需要的实时关注!

目录
相关文章
|
4月前
|
前端开发
canvas图片操作
canvas图片操作
|
前端开发
canvas生成自定义大小图片
canvas生成自定义大小图片
|
3月前
|
Web App开发 前端开发
canvas系列教程04 —— 渐变、阴影、路径、状态、Canvas对象、图形重叠模式
canvas系列教程04 —— 渐变、阴影、路径、状态、Canvas对象、图形重叠模式
220 0
|
5月前
|
前端开发 算法 计算机视觉
用canvas消除锯齿的方式
用canvas消除锯齿的方式
187 0
|
自然语言处理 前端开发 API
改变canvas生成的图片中文本颜色
改变canvas生成的图片中文本颜色
|
5月前
|
前端开发
canvas详解06-合成
canvas详解06-合成
56 2
|
5月前
|
存储 前端开发 索引
canvas详解09-像素操作
canvas详解09-像素操作
122 1
|
5月前
|
前端开发
|
5月前
|
前端开发
canvas实现动态替换人物的背景颜色
canvas实现动态替换人物的背景颜色
|
5月前
|
前端开发 小程序
微信小程序canvas画布绘制;canvas画布图片保存
微信小程序canvas画布绘制;canvas画布图片保存
77 0