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

网页制作 2024/9/22 佚名

3 1 2

前言

今天用 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,闪屏

华山资源网 Design By www.eoogi.com

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

华山资源网 Design By www.eoogi.com

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

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年09月22日

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

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

浅谈HTML5新增和废弃的标签

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

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接