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

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

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

为什么呢?

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

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

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

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


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

目录
相关文章
|
索引
antd a-table表格添加序号和分页总数——基础积累
antd a-table表格添加序号和分页总数——基础积累
1131 0
【el-tree】树形结构拖拽,拖动修改分组
【el-tree】树形结构拖拽,拖动修改分组
1111 1
|
JavaScript 计算机视觉
纯js实现人脸识别眨眨眼张张嘴案例——alive_face.js
纯js实现人脸识别眨眨眼张张嘴案例——alive_face.js
|
6月前
|
缓存 Android开发 开发者
Flutter环境配置完成后,如何在Android设备上运行Flutter应用程序?
Flutter环境配置完成后,如何在Android设备上运行Flutter应用程序?
1012 62
|
计算机视觉
【方便的Opencv】实现播放有声音的视频+附带图片生成gif
【方便的Opencv】实现播放有声音的视频+附带图片生成gif
1095 0
【方便的Opencv】实现播放有声音的视频+附带图片生成gif
|
12月前
|
前端开发 JavaScript 安全
前端JS实现密码校验键盘横竖、26字母、相同字母、相同数字、密码包含用户名、数字 字母不能连续 不能相同三个、不能横向 竖向 连续三个 包含字符、不能有中文符号
该 JavaScript 代码实现了一个严格的密码校验功能,确保密码满足多种安全要求,包括长度、字符类型、不包含中文及特殊字符、不与用户名相似等。通过多个辅助函数,如 `validateFormat` 检查密码格式,`isHasChinaCharFun` 检测中文符号,`getCharAll` 生成键盘组合,以及 `checkPasswordFun` 综合验证密码的有效性和安全性。此工具对于提高用户账户的安全性非常有用。
491 0
|
Web App开发 前端开发
canvas系列教程04 —— 渐变、阴影、路径、状态、Canvas对象、图形重叠模式
canvas系列教程04 —— 渐变、阴影、路径、状态、Canvas对象、图形重叠模式
824 0
|
JavaScript UED
以 Vue 3 项目为例,多个请求下如何全局封装 Loading 的展示与关闭?其中大有学问!
以 Vue 3 项目为例,多个请求下如何全局封装 Loading 的展示与关闭?其中大有学问!
|
Dart
Flutter笔记:手动配置VSCode中Dart代码自动格式化
Flutter笔记:手动配置VSCode中Dart代码自动格式化
1420 5
|
前端开发 JavaScript
基于Vue3实现鼠标按下某个元素进行拖动,实时改变左侧或右侧元素的宽度,以及点击收起或展开的功能
本文介绍了如何在Vue3项目中实现一个鼠标拖动调整元素宽度的功能,并展示了点击按钮收起或展开侧边栏的效果,提供了完整的实现代码和操作演示。
1724 0
基于Vue3实现鼠标按下某个元素进行拖动,实时改变左侧或右侧元素的宽度,以及点击收起或展开的功能