详解使用双缓存解决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的transform做的动态时钟效果
Sep 21 HTML / CSS
CSS3实现超慢速移动动画效果非常流畅无卡顿
Jun 15 HTML / CSS
基于CSS3实现图片模糊过滤效果
Nov 19 HTML / CSS
CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
Nov 17 HTML / CSS
html5贪吃蛇游戏使用63行代码完美实现
Jun 25 HTML / CSS
一些常用的HTML5模式(pattern) 总结
Jul 14 HTML / CSS
HTML5学习心得总结(推荐)
Jul 08 HTML / CSS
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
Mar 02 HTML / CSS
CSS3实现的文字弹出特效
Apr 16 HTML / CSS
CSS几步实现赛博朋克2077风格视觉效果
Jun 16 HTML / CSS
带你了解CSS基础知识,样式
Jul 21 HTML / CSS
小程序实现悬浮按钮的全过程记录
Oct 16 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绘图技术
2013/07/03 PHP
php获取域名的google收录示例
2014/03/24 PHP
分享最受欢迎的5款PHP框架
2014/11/27 PHP
Yii实现MySQL多数据库和读写分离实例分析
2014/12/03 PHP
PHP实现通用alert函数的方法
2015/03/11 PHP
浅析php-fpm静态和动态执行方式的比较
2016/11/09 PHP
PHP实现转盘抽奖算法分享
2020/04/15 PHP
PHP数组访问常用方法解析
2020/09/05 PHP
用JavaScript获取网页中的js、css、Flash等文件
2006/12/20 Javascript
prototype与jquery下Ajax实现的差别
2009/09/13 Javascript
js网页侧边随页面滚动广告效果实现
2011/04/14 Javascript
js Function类型
2011/12/04 Javascript
js操作输入框提示信息且响应鼠标事件
2014/03/25 Javascript
jquery制作LED 时钟特效
2015/02/01 Javascript
Bootstrap自定义文件上传下载样式
2016/05/26 Javascript
js实现5秒倒计时重新发送短信功能
2017/02/05 Javascript
为Jquery EasyUI 组件加上清除功能的方法(详解)
2017/04/13 jQuery
vue2.0 与 bootstrap datetimepicker的结合使用实例
2017/05/22 Javascript
简单的Vue异步组件实例Demo
2017/12/27 Javascript
swiper动态改变滑动内容的实现方法
2018/01/17 Javascript
vue基于两个计算属性实现选中和全选功能示例
2019/02/08 Javascript
Node 模块原理与用法详解
2020/05/13 Javascript
vue接口请求加密实例
2020/08/11 Javascript
numpy中loadtxt 的用法详解
2018/08/03 Python
如何使用python爬虫爬取要登陆的网站
2019/07/12 Python
python中从for循环延申到推导式的具体使用
2019/11/29 Python
python+selenium+PhantomJS抓取网页动态加载内容
2020/02/25 Python
numpy矩阵数值太多不能全部显示的解决
2020/05/14 Python
Python操作Elasticsearch处理timeout超时
2020/07/17 Python
工作中个人的自我评价
2013/12/31 职场文书
四风对照检查材料思想汇报
2014/09/20 职场文书
2015年考研复习计划
2015/01/19 职场文书
财务人员个人工作总结
2015/02/27 职场文书
庆祝教师节新闻稿
2015/07/17 职场文书
2021年最新用于图像处理的Python库总结
2021/06/15 Python
解决 Redis 秒杀超卖场景的高并发
2022/04/12 Redis