微信小程序canvas2d频繁刷新图片时图片闪烁问题

问题:使用了拖动事件,需要频繁重绘canvas,导致图片闪烁。

原因:官方示例中,canvas2d需要手动加载图片,再在图片的onLoad函数绘制图片,延迟太高,导致刷新时图片闪烁。

解决:无需每次刷新都加载图片,导入图片后保存图片对象,后续不用重新加载图片,直接用这个对象绘制。

javascript 复制代码
// 图片加载函数中
// 创建图片对象,用于绘制背景图片
const image = this.canvas.createImage()
	image.src = res.tempFilePaths[0];
	image.onload = () => {
		this.imageLoaded = true;
		this.backImage = image;
		this.reDraw()
	}


// 绘制函数中
// 若图片加载完成->绘制背景图
if (this.imageLoaded) { 
this.ctx.drawImage(
	this.backImage,
	0,
	0,
	this.canvasW,
	this.canvasH,
)
}
相关推荐
RopenYuan3 小时前
FastAPI -API Router的应用
前端·网络·python
走粥4 小时前
clsx和twMerge解决CSS类名冲突问题
前端·css
Purgatory0014 小时前
layui select重新渲染
前端·layui
weixin199701080164 小时前
《中国供应商商品详情页前端性能优化实战》
前端·性能优化
九皇叔叔5 小时前
003-SpringSecurity-Demo 统一响应类
java·javascript·spring·springsecurity
赵孝正6 小时前
学习的本质是一个工程闭环:从模仿到内化的四阶段方法论(附风电实战案例)
前端·数据库·学习
低代码布道师7 小时前
纯代码实战:MBA培训管理系统 (十四) ——用户管理(批量选择与批量删除)
javascript·nextjs
m0_462803887 小时前
“趣味运动会记分”功能教学指南
小程序