详解使用双缓存解决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针对移动端卡顿问题的解决(动画性能优化)
Feb 14 HTML / CSS
css3 transform导致子元素固定定位变成绝对定位的方法
Mar 06 HTML / CSS
CSS3为背景图设置遮罩并解决遮罩样式继承问题
Jun 22 HTML / CSS
html5 video标签屏蔽右键视频另存为的js代码
Nov 12 HTML / CSS
html5版canvas自由拼图实例
Oct 15 HTML / CSS
有关HTML5页面在iPhoneX适配问题
Nov 13 HTML / CSS
详解html5页面 rem 布局适配方法
Jan 12 HTML / CSS
HTML5录音实践总结(Preact)
May 07 HTML / CSS
html5简介及新增功能介绍
May 18 HTML / CSS
前后端结合实现amazeUI分页效果
Aug 21 HTML / CSS
CSS3新特性详解(五):多列columns column-count和flex布局
Apr 30 HTML / CSS
分享CSS盒子模型隐藏的几种方式
Feb 28 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小程序自动提交到自助友情连接
2009/11/24 PHP
下拉列表多级联动dropDownList示例代码
2013/06/27 PHP
PHP实现链式操作的三种方法详解
2017/11/16 PHP
JQuery开发的数独游戏代码
2010/10/29 Javascript
基于PHP+Jquery制作的可编辑的表格的代码
2011/04/10 Javascript
jquery选择器的选择使用及性能介绍
2013/01/16 Javascript
jquery html动态生成select标签出问题的解决方法
2013/11/20 Javascript
jQuery移除元素自动解绑事件实现思路及代码
2014/05/31 Javascript
JS与HTML结合使用marquee标签实现无缝滚动效果代码
2016/07/05 Javascript
如何利用JSHint减少JavaScript的错误
2016/08/23 Javascript
零基础轻松学JavaScript闭包
2016/12/30 Javascript
关于vue.js v-bind 的一些理解和思考
2017/06/06 Javascript
BootStrap入门学习第一篇
2017/08/28 Javascript
JS实现手写parseInt的方法示例
2017/09/24 Javascript
VueRouter导航守卫用法详解
2017/12/25 Javascript
vue将对象新增的属性添加到检测序列的方法
2018/02/24 Javascript
JavaScript栈和队列相关操作与实现方法详解
2018/12/07 Javascript
js序列化和反序列化的使用讲解
2019/01/19 Javascript
Vue组件间通信方法总结(父子组件、兄弟组件及祖先后代组件间)
2019/04/17 Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
2020/10/29 Javascript
微信小程序实现天气预报功能(附源码)
2020/12/10 Javascript
[02:16]深扒TI7聊天轮盘语音出处2
2017/05/11 DOTA
python使用socket进行简单网络连接的方法
2015/04/29 Python
python类中super()和__init__()的区别
2016/10/18 Python
python库lxml在linux和WIN系统下的安装
2018/06/24 Python
浅析python,PyCharm,Anaconda三者之间的关系
2019/11/27 Python
关于Python中定制类的比较运算实例
2019/12/19 Python
CSS3 滤镜 webkit-filter详细介绍及使用方法
2012/12/27 HTML / CSS
美国椅子和沙发制造商:La-Z-Boy
2020/10/25 全球购物
酒店餐厅2014重阳节活动策划方案
2014/09/16 职场文书
国庆节演讲稿范文2014
2014/09/19 职场文书
收入及婚姻状况证明
2014/11/20 职场文书
舞蹈社团活动总结
2015/05/07 职场文书
演讲稿之我的初心我的成长
2019/08/12 职场文书
小型企业的绩效考核制度模板
2019/11/21 职场文书
十大最强水系宝可梦,最美宝可梦排第三,榜首大家最熟悉
2022/03/18 日漫