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

站长资源 2024/11/5 佚名

2 0 1

前言

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

问题简介

功能简介

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
}

效果验收

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

总结

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

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

双缓存,Canvas,clearRect,闪屏

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

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

暂无评论...

www.yaopr.com 丐帮资源网

39,976影音资源

44,792技术资源

21,817软件资源

651,128站长资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年11月05日

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

深入了解canvas在移动端绘制模糊的问题解决

浅谈HTML5新增和废弃的标签

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

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接