Q1.canvas上画图片失败
A1.
等图片加载成功后才可以进行绘制。
drawImage这个方法，当图片在没加载完的情况下使用，他会不被调用。绘制就会失败。
var img=document.getElementById("scream");

img.onload = function() {
    ctx.drawImage(img,10,10);
}

 

Q2.canvas上画图出现闪屏

A2.闪屏的原因是 clearRect 清除画布后，绘制的时间较长导致出现闪屏的现象。

可用双缓存写法：新建一个 canvas 作为 缓存 canvas ，通过 缓存 canvas 完成绘制过程，绘制完成后，直接将 缓存 canvas 复制到原来的 canvas，这样就可以解决绘制时间过长导致的闪屏问题。

参考链接

// 关键代码
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
}

Q3: 在dialog中使用画布canvas的时候会提示报错Cannot read property ‘getContext’ of null"

A3:在获取的方法里面加上this.$nextTick(),具体代码如下所示：

this.$nextTick(() => {
      var canvas = document.getElementById("myCanvas");
      var ctx = canvas.getContext("2d")；
}

this.$nextTick()的作用：将回调延迟到下次 DOM 更新循环之后执行

解释：当dialog打开时，这时候canvas有可能并没有被渲染出来，这个时候去获取canvas元素会报错；而this.$nextTick()在这里实际上指的是等待dialog里面的canvas渲染完，再去执行里面的代码