canvas画图时的bug记录

1.重复使用图片的onload事件中处理某些事，出现图片闪烁

在调用画图片的构造函数时，我们可以先在constructor中缓存图片

constructor(){
 	this.img = new Image();
 	this.img.src = require("xx");
}
1
2
3
4

然后再在方法中画图片

this.ctx.drawImage(this.img,width,height)
1

2.当画布上出现重叠的图像

this.canvasDom = document.getElementById("canvas");
this.ctx = this.canvasDom.getContext("2d");
const { width, height } = this.canvasDom;
this.width = width;
this.height = height;
1
2
3
4
5

先把原先的画布信息存下来

this.imageData = this.ctx.getImageData(
  0,
  0,
  this.width,
  this.height
);
1
2
3
4
5
6

清空画布，把存储的画布信息放上去，再加上自己新的内容

ctx.clearRect(0, 0, this.width, this.height);
this.imageData &&
  ctx.putImageData(
    this.imageData,
    0,
    0,
    0,
    0,
    this.width,
    this.height
  );
1
2
3
4
5
6
7
8
9
10
11