微信小程序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,
)
}
相关推荐
且菜且折腾10 小时前
react快捷键hook
javascript·react.js·ecmascript
什么都不会的Tristan10 小时前
Feed流(关注推送)
java·前端·数据库
IT_陈寒10 小时前
Vite 5.0 性能优化实战:从3秒到300ms的构建提速秘籍
前端·人工智能·后端
一路向前的月光10 小时前
前端采用electron-hiprint控件实现静默打印
前端·javascript·electron
Jagger_10 小时前
AI还原设计稿方法
前端
毛小茛10 小时前
pnpm 已经安装成功,但 npm 的全局 bin 目录没有进 PATH
前端·npm·node.js
胡琦博客11 小时前
基于华为开发者空间云开发环境(容器)探索前端智能化
前端·人工智能·华为云
会员源码网11 小时前
最新壁纸头像小程序系统源码 制作头像的软件 头像壁纸软件 带流量主
小程序
2501_9151063211 小时前
Perfdog 成本变高之后,Windows 上还能怎么做 iOS APP 性能测试
android·ios·小程序·https·uni-app·iphone·webview
vx_bisheyuange11 小时前
基于SpringBoot的青年公寓服务平台
前端·vue.js·spring boot·毕业设计