详解使用双缓存解决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属性box-shadow使用详细教程
Jan 21 HTML / CSS
css3 旋转按钮 使用CSS3创建一个旋转可变色按钮
Dec 31 HTML / CSS
CSS3控制HTML元素动画效果
Feb 08 HTML / CSS
css3动画效果小结(推荐)
Jul 25 HTML / CSS
Css3新特性应用之形状总结
Dec 08 HTML / CSS
CSS3之2D与3D变换的实现方法
Jan 28 HTML / CSS
HTML5-WebSocket实现聊天室示例
Dec 15 HTML / CSS
HTML5 Canvas自定义圆角矩形与虚线示例代码
Aug 02 HTML / CSS
html5 canvas合成海报所遇问题及解决方案总结
Aug 03 HTML / CSS
html5小程序飞入购物车(抛物线绘制运动轨迹点)
Oct 19 HTML / CSS
CSS3 制作精美的定价表
Apr 06 HTML / CSS
CSS3鼠标悬浮过渡缩放效果
Apr 17 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
GD输出汉字的函数的分析
2006/10/09 PHP
php运行出现Call to undefined function curl_init()的解决方法
2010/11/02 PHP
PHP使用strtotime计算两个给定日期之间天数的方法
2015/03/18 PHP
php 参数过滤、数据过滤详解
2015/10/26 PHP
Yii2.0中的COOKIE和SESSION用法
2016/08/12 PHP
PHP查看SSL证书信息的方法
2016/09/22 PHP
IE php关于强制下载文件的代码
2008/08/23 Javascript
javascript 伪数组实现方法
2010/10/11 Javascript
网易JS面试题与Javascript词法作用域说明
2010/11/09 Javascript
js中的referrer返回上一页使用介绍
2013/09/26 Javascript
JavaScript改变HTML元素的样式改变CSS及元素属性
2013/11/12 Javascript
JS按字节截取字符长度实例
2013/11/20 Javascript
js数字转换为float,取N位小数
2014/02/08 Javascript
jquery+css3问卷答题卡翻页动画效果示例
2016/10/26 Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
2016/11/06 Javascript
JavaScript数组和对象的复制
2017/03/21 Javascript
js 获取今天以及过去日期
2017/04/11 Javascript
AngularJS实现的JSONP跨域访问数据传输功能详解
2017/07/20 Javascript
JavaScript数组排序reverse()和sort()方法详解
2017/12/24 Javascript
vue实现图片滚动的示例代码(类似走马灯效果)
2018/03/03 Javascript
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
2018/04/12 jQuery
js中Object.defineProperty()方法的不详解
2018/07/09 Javascript
通过函数作用域和块级作用域看javascript的作用域链
2018/08/05 Javascript
微信小程序实现电子签名功能
2020/07/29 Javascript
整理Python中的赋值运算符
2015/05/13 Python
详解如何将python3.6软件的py文件打包成exe程序
2018/10/09 Python
python实战串口助手_解决8串口多个发送的问题
2019/06/12 Python
Python中的正则表达式与JSON数据交换格式
2019/07/03 Python
Win10里python3创建虚拟环境的步骤
2020/01/31 Python
python hmac模块验证客户端的合法性
2020/11/07 Python
出纳员岗位职责风险
2014/03/06 职场文书
学校春季防火方案
2014/06/08 职场文书
公共机构节能宣传周活动总结
2014/07/09 职场文书
2014年小学生迎国庆65周年演讲稿
2014/09/27 职场文书
简历自我评价模板
2015/03/11 职场文书
结婚当天新郎保证书
2015/05/08 职场文书