详解使用双缓存解决Canvas clearRect引起的闪屏问题


Posted in HTML / CSS onApril 29, 2019

前言

今天用 canvas 做 H5 的时候遇到了闪屏问题。闪烁效果如下图:

详解使用双缓存解决Canvas clearRect引起的闪屏问题 

问题简介

功能简介

H5 该部分的功能为:通过点击二级菜单,切换图片的遮罩或者更换背景。

因为功能简单,所以用了原生 canvas 实现这个功能。但在使用 clearRect 清除画布的时候会出现闪烁的情况。

代码实现(问题代码)

以下代码即为出现闪屏的关键代码,省略了图片的定义与 onload:

// 点击二级菜单后,触发该函数更新画布
updateCanvas(){
    const canvas = document.getElementById('canvas'); // 获取画布
    const ctx = canvas.getContext('2d');
    ctx.clearRect(0,0,1448,750); // 清空画布
    // 开始重绘
    ctx.drawImage(bg,0,0); // 背景
    ... // 省略其他绘制过程
}

问题分析

经过简单分析,得出闪屏的原因是 clearRect 清除画布后,绘制的时间较长导致出现闪屏的现象。

什么是双缓存

来看一下microsoft 网站中双缓冲图形 这篇文章对双缓存的解释:

对图形进行编程时出现闪烁是一个常见问题。 需要多个复杂画图操作的图形操作可导致呈现的图像出现闪烁或具有不可接受的外观。 为解决这些问题,.NET Framework 提供了双缓冲功能。

双缓冲使用内容缓冲来解决与多个画图操作相关的闪烁问题。 启用双缓冲后,所有画图操作会首先呈现到内存缓冲而不是屏幕上的绘图图面。 所有画图操作完成后,内存缓冲会直接复制到与之关联的绘图图面。 由于屏幕上仅执行一个图形操作,因此与复杂画图操作相关的图像闪烁可得以消除。

使用双缓存解决问题

以上引用,简单来说,主要问题就是绘制时间较长导致了闪屏,解决方法就是新建一个 canvas 作为 缓存 canvas ,通过 缓存 canvas 完成绘制过程,绘制完成后,直接将 缓存 canvas 复制到原来的 canvas,这样就可以解决绘制时间过长导致的闪屏问题。

代码实现

以下代码即为关键代码,省略了图片的定义与 onload:

updateCanvas(){
    const canvas = document.getElementById('canvas'); // 获取页面中的 canvas
    const ctx = canvas.getContext('2d');
    
    const tempCanvas = document.createElement('canvas'); // 新建一个 canvas 作为缓存 canvas
    const tempCtx = tempCanvas.getContext('2d');
    tempCanvas.width = 1448; tempCanvas.height = 750; // 设置宽高

    // 开始绘制
    tempCtx.drawImage(bg,0,0); // 背景
    ... // 省略其他绘制过程
    
    // 缓存 canvas 绘制完成
    
    ctx.clearRect(0,0,1448,750); // 清空旧 canvas
    ctx.drawImage(tempCanvas,0,0); // 将缓存 canvas 复制到旧的 canvas
}

效果验收

可以很明显的看到闪屏问题解决了!

详解使用双缓存解决Canvas clearRect引起的闪屏问题 

总结

重绘画布的时候,我们需要使用 clearRect 来清空画布,此时的画布是空的,开始重绘后,如果内容较多,时间也就相应的增加,因此视觉出现了空档期,我们就看到了闪屏的情况;

解决闪屏,其实就是怎么解决绘制时间较长的问题;

这里参考了图形图象处理编程中 双缓存 的概念,将绘制过程交给了 缓存 canvas ,这样页面中的 canvas 就省去了绘制过程,而 缓存 canvas 并没有添加到页面,所以我们就看不到绘制过程,也就解决了闪屏的问题。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3实现跳动的动画效果
Sep 12 HTML / CSS
轻松掌握CSS3中的字体大小单位rem的使用方法
May 24 HTML / CSS
利用CSS3实现进度条的两种姿势详解
Mar 21 HTML / CSS
纯CSS3制作页面切换效果的实例代码
May 30 HTML / CSS
HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍
Jan 31 HTML / CSS
将HTML5 Canvas的内容保存为图片借助toDataURL实现
May 20 HTML / CSS
Html5大文件断点续传实现方法
Dec 05 HTML / CSS
h5使用canvas画布实现手势解锁
Jan 04 HTML / CSS
AmazeUI折叠式卡片布局,整合内容列表、表格组件实现
Aug 20 HTML / CSS
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
Mar 30 HTML / CSS
CSS3实现的文字弹出特效
Apr 16 HTML / CSS
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
Dec 24 HTML / CSS
浅谈HTML5新增和废弃的标签
Apr 28 #HTML / CSS
Canvas实现贝赛尔曲线轨迹动画的示例代码
Apr 25 #HTML / CSS
可能这些是你想要的H5软键盘兼容方案(小结)
Apr 23 #HTML / CSS
详解三种方式实现平滑滚动页面到顶部的功能
Apr 23 #HTML / CSS
小程序canvas中文字设置居中锚点
Apr 16 #HTML / CSS
用canvas做一个DVD待机动画的实现代码
Apr 12 #HTML / CSS
Html5适配iphoneX刘海屏的简单实现
Apr 09 #HTML / CSS
You might like
PHP中上传大体积文件时需要的设置
2006/10/09 PHP
用PHP实现的生成静态HTML速度快类库
2007/03/31 PHP
Zend studio for eclipse中使php可以调用mysql相关函数的设置方法
2008/10/13 PHP
PHP的单引号和双引号 字符串效率
2009/05/27 PHP
PHP Error与Logging函数的深入理解
2013/06/03 PHP
PHP代码优化的53个细节
2014/03/03 PHP
php多重接口的实现方法
2015/06/20 PHP
IE中jscript/javascript的条件编译
2006/09/07 Javascript
IE bug table元素的innerHTML
2010/01/11 Javascript
javascript 数据类型转换(parseInt,parseFloat)
2010/07/20 Javascript
Javascript的数组与字典用法与遍历对象的属性技巧
2012/11/07 Javascript
Extjs4 类的定义和扩展实例
2013/06/28 Javascript
jQuery实现购物车多物品数量的加减+总价计算
2014/06/06 Javascript
JS实现CheckBox复选框全选、不选或全不选功能
2020/07/28 Javascript
Google 地图事件实例讲解
2016/08/06 Javascript
微信小程序 wxapp内容组件 icon详细介绍
2016/10/31 Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
2016/12/08 Javascript
es6在react中的应用代码解析
2017/11/08 Javascript
jquery分页优化操作实例分析
2019/08/23 jQuery
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
2020/02/01 jQuery
[46:21]Liquid vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
Python使用random和tertools模块解一些经典概率问题
2015/01/28 Python
python自然语言编码转换模块codecs介绍
2015/04/08 Python
Python中的Matplotlib模块入门教程
2015/04/15 Python
Python实现时钟显示效果思路详解
2018/04/11 Python
使用python爬取B站千万级数据
2018/06/08 Python
使用Python+wxpy 找出微信里把你删除的好友实例
2019/02/21 Python
Tensorflow设置显存自适应,显存比例的操作
2020/02/03 Python
Python OpenCV读取显示视频的方法示例
2020/02/20 Python
python反编译教程之2048小游戏实例
2021/03/03 Python
Hotels.com印度:酒店预订
2019/05/11 全球购物
世界上最大的字体市场:MyFonts
2020/01/10 全球购物
面向对象编程是如何提高软件开发水平的
2014/05/06 面试题
九年级英语教学反思
2014/01/31 职场文书
社区网格化管理实施方案
2014/03/21 职场文书
如何用 Python 子进程关闭 Excel 自动化中的弹窗
2021/05/07 Python