详解使用双缓存解决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制作精致的照片墙特效
Jun 07 HTML / CSS
css3闪亮进度条效果实现思路及代码
Apr 17 HTML / CSS
CSS3实现的文本3D效果附图
Sep 03 HTML / CSS
基于css3 animate制作绚丽的动画效果
Nov 24 HTML / CSS
CSS3 @keyframes简单动画实现
Feb 24 HTML / CSS
html5组织文档结构_动力节点Java学院整理
Jul 11 HTML / CSS
HTML5中视频音频的使用详解
Jul 07 HTML / CSS
HTML5标签与HTML4标签的区别示例介绍
Jul 18 HTML / CSS
html5定位并在百度地图上显示的示例
Apr 27 HTML / CSS
Html5新标签datalist实现输入框与后台数据库数据的动态匹配
May 18 HTML / CSS
详解盒子端CSS动画性能提升
May 24 HTML / CSS
MIME类型中application/xml与text/xml的区别介绍
Jan 18 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
20个PHP常用类库小结
2011/09/11 PHP
jquery 如何动态添加、删除class样式方法介绍
2012/11/07 Javascript
treepanel动态加载数据实现代码
2012/12/15 Javascript
火狐textarea输入法的bug的触发及解决
2013/07/24 Javascript
教你如何使用PHP输出中文JSON字符串
2014/05/22 Javascript
javascript中parseInt()函数的定义和用法分析
2014/12/20 Javascript
浅析javascript中的DOM
2015/03/01 Javascript
javascript冒泡排序小结
2016/04/10 Javascript
基于node实现websocket协议
2016/04/25 Javascript
jQuery 实现双击编辑表格功能
2017/06/19 jQuery
使用npm安装最新版本nodejs
2018/01/18 NodeJs
Angular使用操作事件指令ng-click传多个参数示例
2018/03/27 Javascript
详解vue 兼容IE报错解决方案
2018/12/29 Javascript
Vue开发Html5微信公众号的步骤
2019/04/11 Javascript
vue选项卡切换登录方式小案例
2019/09/27 Javascript
vue+echarts实现动态折线图的方法与注意
2020/09/01 Javascript
vue 实现一个简单的全局调用弹窗案例
2020/09/10 Javascript
vue实践---vue不依赖外部资源实现简单多语操作
2020/09/21 Javascript
python中使用百度音乐搜索的api下载指定歌曲的lrc歌词
2014/07/18 Python
使用优化器来提升Python程序的执行效率的教程
2015/04/02 Python
Python中获取对象信息的方法
2015/04/27 Python
python中执行shell的两种方法总结
2017/01/10 Python
Python Xml文件添加字节属性的方法
2018/03/31 Python
python 字典修改键(key)的几种方法
2018/08/10 Python
Python操作配置文件ini的三种方法讲解
2019/02/22 Python
Python安装Flask环境及简单应用示例
2019/05/03 Python
PyQt使用QPropertyAnimation开发简单动画
2020/04/02 Python
如何基于Python代码实现高精度免费OCR工具
2020/06/18 Python
css3闪亮进度条效果实现思路及代码
2013/04/17 HTML / CSS
laravel使用redis队列实例讲解
2021/03/23 PHP
分层教学实施方案
2014/03/19 职场文书
企业法律事务工作总结
2015/08/11 职场文书
2016幼儿园毕业感言
2015/12/08 职场文书
bootstrapv4轮播图去除两侧阴影及线框的方法
2022/02/15 HTML / CSS
css filter和getUserMedia的联合使用
2022/02/24 HTML / CSS
SQL Server中常用截取字符串函数介绍
2022/03/16 SQL Server