微信小程序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,
)
}
相关推荐
_AaronWong44 分钟前
Electron 实现仿豆包划词取词功能:从 AI 生成到落地踩坑记
前端·javascript·vue.js
cxxcode44 分钟前
I/O 多路复用:从浏览器到 Linux 内核
前端
用户5433081441941 小时前
AI 时代,前端逆向的门槛已经低到离谱 — 以 Upwork 为例
前端
JarvanMo1 小时前
Flutter 版本的 material_ui 已经上架 pub.dev 啦!快来抢先体验吧。
前端
JohnYan1 小时前
工作笔记-CodeBuddy应用探索
javascript·ai编程·aiops
恋猫de小郭1 小时前
AI 可以让 WIFI 实现监控室内人体位置和姿态,无需摄像头?
前端·人工智能·ai编程
哀木1 小时前
给自己整一个 claude code,解锁编程新姿势
前端
程序员鱼皮2 小时前
GitHub 关注突破 2w,我总结了 10 个涨星涨粉技巧!
前端·后端·github
UrbanJazzerati2 小时前
Vue3 父子组件通信完全指南
前端·面试
是一碗螺丝粉2 小时前
5分钟上手LangChain.js:用DeepSeek给你的App加上AI能力
前端·人工智能·langchain