1.重复使用图片的onload事件中处理某些事,出现图片闪烁
在调用画图片的构造函数时,我们可以先在constructor中缓存图片
constructor(){
this.img = new Image();
this.img.src = require("xx");
}
然后再在方法中画图片
this.ctx.drawImage(this.img,width,height)
2.当画布上出现重叠的图像
this.canvasDom = document.getElementById("canvas");
this.ctx = this.canvasDom.getContext("2d");
const { width, height } = this.canvasDom;
this.width = width;
this.height = height;
先把原先的画布信息存下来
this.imageData = this.ctx.getImageData(
0,
0,
this.width,
this.height
);
清空画布,把存储的画布信息放上去,再加上自己新的内容
ctx.clearRect(0, 0, this.width, this.height);
this.imageData &&
ctx.putImageData(
this.imageData,
0,
0,
0,
0,
this.width,
this.height
);