微信小程序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,
)
}
相关推荐
Learner2 分钟前
Python异常处理
java·前端·python
tao3556676 分钟前
VS Code登录codex,报错(os error 10013)
java·服务器·前端
内存不泄露8 分钟前
棋牌预约小程序系统论文
小程序
军军君019 分钟前
Three.js基础功能学习七:加载器与管理器
开发语言·前端·javascript·学习·3d·threejs·三维
哈__10 分钟前
React Native 鸿蒙开发:内置 Share 模块实现无配置社交分享
javascript·react native·react.js
JarvanMo12 分钟前
情迷服务器驱动 UI:我在 Flutter 开发中的爱与哀愁
前端
tzy23314 分钟前
分享一个 HTTP(S) 代理&抓包工具,拦截和Mock Web客户端请求和服务端响应
前端·网络协议·http
代码小学僧20 分钟前
普通前端仔的 2025 : 年终总结与 AI 对我的影响
前端·程序员·ai编程
Mike_jia26 分钟前
TCP 粘包/拆包问题
前端
沐墨染33 分钟前
敏感词智能检索前端组件设计:树形组织过滤与多维数据分析
前端·javascript·vue.js·ui·数据挖掘·数据分析