前言
今天用 canvas 做 H5 的时候遇到了闪屏问题。闪烁效果如下图：
问题简介
功能简介
H5 该部分的功能为：通过点击二级菜单，切换图片的遮罩或者更换背景。
因为功能简单，所以用了原生 canvas 实现这个功能。但在使用 clearRect 清除画布的时候会出现闪烁的情况。
代码实现（问题代码）
以下代码即为出现闪屏的关键代码，省略了图片的定义与 onload：
// 点击二级菜单后，触发该函数更新画布
updateCanvas(){
const canvas = document.getElementById('canvas'); // 获取画布
const
2022-01-29 09:29:53
190KB
1
Android应用源码之完美！ 闪屏+引导页 功能全面！源码详细注释！技术实现完整源码下载
2022-01-12 19:09:45
5.66MB
问题解说:
在使用css 的animations 属性时,首次加载循环会出现白色的间隙,看着有点像页面有刷新的感觉,后面每次循环就不会再有这个问题
问题演示
//html
//less
.container {
width: 100vw;
height: 100%;
}
.container .first {
width: 100vw;
height: 100vh;
animation: bgmove 10s infinite;
}
2021-12-27 18:15:27
112KB
1