canvas双缓存绘制中，缓存canvas中绘制的图片无法在显示canvas中显示出来

问题1：在canvas动画的绘制过程中，ctx.clearRect()与ctx的再次重绘会出现一个显示闪烁问题

原因：这是由于清空canvas后，出现了一个绘制过程的空档期。

解决方法：引出了双缓存方式的绘制方法。相应代码如下：

function updateCanvas(){
    var canvas = document.getElementById('canvas'); // 获取页面中的 canvas
    var ctx = canvas.getContext('2d');
     
    var tempCanvas = document.createElement('canvas'); // 新建一个缓存 canvas
    var tempCtx = tempCanvas.getContext('2d');
    tempCanvas.width = 1440; 
    tempCanvas.height = 417; 
 
    // 开始绘制
    tempCtx.drawImage(img,0,0); // 背景
    ... // 省略其他绘制过程
     
    // 缓存 canvas 绘制完成
     
    ctx.clearRect(0,0,1440,417); // 清空旧 canvas
    ctx.drawImage(tempCanvas,0,0); // 将缓存 canvas 复制到旧的 canvas
}

 

问题2：在使用双缓存方式过程中，我是加载的本地图片，出现了tempCanvas中绘制的图片无法在显示canvas中显示出来

问题代码：

function updateCanvas(){
    const canvas = document.getElementById('canvas'); // 获取页面中的 canvas
    const ctx = canvas.getContext('2d');
     
    const tempCanvas = document.createElement('canvas'); // 新建一个缓存 canvas
    const tempCtx = tempCanvas.getContext('2d');
    tempCanvas.width = 1440; 
    tempCanvas.height = 417; // 设置宽高
 
    // 开始绘制
    var img = new Image();
    img.src = "./img/bg.jpg";
    img.onload = function(){
        tempCtx.drawImage(img,0,0); // 背景
    }
    // 缓存 canvas 绘制完成
     
    ctx.clearRect(0,0,1440,417); // 清空旧 canvas
    ctx.drawImage(tempCanvas,0,0); // 将缓存 canvas 复制到旧的 canvas
}

原因：在将缓存canvas绘制到显示canvas的时候，由于图片加载未完成，故此tempCtx还未将图片绘制到自己的canvas中去，便导致了显示canvas中没有绘制出图片。

解决方法：将ctx.clearRect()以及ctx.drawImage()放到img.onload()中。

function updateCanvas(){
    const canvas = document.getElementById('canvas'); // 获取页面中的 canvas
    const ctx = canvas.getContext('2d');
     
    const tempCanvas = document.createElement('canvas'); // 新建一个缓存 canvas
    const tempCtx = tempCanvas.getContext('2d');
    tempCanvas.width = 1440; 
    tempCanvas.height = 417; // 设置宽高
 
    // 开始绘制
    var img = new Image();
    img.src = "./img/bg.jpg";
    img.onload = function(){
        tempCtx.drawImage(img,0,0); // 背景
        // 缓存 canvas 绘制完成
        ctx.clearRect(0,0,1440,417); // 清空旧 canvas
        ctx.drawImage(tempCanvas,0,0); // 将缓存 canvas 复制到旧的 canvas
    }
}