详解应用双缓存文件处理Canvas clearRect引发的闪屏

序言

今日用 canvas 做 H5 的情况下遇到了闪屏难题。闪动实际效果以下图：

难题简介

作用简介

H5 该一部分的作用为：根据点一下2级菜单，切换照片的遮罩或拆换情况。

由于作用简易，因此用了原生态 canvas 完成这个作用。但在应用 clearRect 消除画布的情况下会出現闪动的状况。

编码完成（难题编码）

下列编码即为出現闪屏的重要编码，省略了照片的界定与 onload：

// 点一下2级菜单后，开启该涵数升级画布
updateCanvas(){
    const canvas = document.getElementById('canvas'); // 获得画布
    const ctx = canvas.getContext('2d');
    ctx.clearRect(0,0,1448,750); // 清空画布
    // 刚开始重绘
    ctx.drawImage(bg,0,0); // 情况
    ... // 省略别的绘图全过程
}

难题剖析

历经简易剖析，得出闪屏的缘故是 clearRect 消除画布后，绘图的時间较长致使出現闪屏的状况。

甚么是双缓存文件

看来1下microsoft 网站中双缓存图型 这篇文章内容对双缓存文件的解释：

对图型开展程序编写时出現闪动是1个普遍难题。 必须好几个繁杂画图实际操作的图型实际操作可致使展现的图象出現闪动或具备不能接纳的外型。 为处理这些难题，.NET Framework 出示了双缓存作用。

双缓存应用內容缓存来处理与好几个画图实际操作有关的闪动难题。 开启双缓存后，全部画图实际操作会最先展现到运行内存缓存而并不是显示屏上的制图图面。 全部画图实际操作进行后，运行内存缓存会立即拷贝到与之关系的制图图面。 因为显示屏上仅实行1个图型实际操作，因而与繁杂画图实际操作有关的图象闪动可得以清除。

应用双缓存文件处理难题

以上引入，简易来讲，关键难题便是绘图時间较长致使了闪屏，处理方式便是新建1个 canvas 做为 缓存文件 canvas ，根据 缓存文件 canvas 进行绘图全过程，绘图进行后，立即将 缓存文件 canvas 拷贝到原先的 canvas，这样便可以处理绘图時间太长致使的闪屏难题。

编码完成

下列编码即为重要编码，省略了照片的界定与 onload：

updateCanvas(){
    const canvas = document.getElementById('canvas'); // 获得网页页面中的 canvas
    const ctx = canvas.getContext('2d');
    
    const tempCanvas = document.createElement('canvas'); // 新建1个 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 并沒有加上到网页页面，因此大家就看不见绘图全过程，也就处理了闪屏的难题。

以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。