微信小程序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,
)
}
相关推荐
晴天16几秒前
Chrome WebMCP 让网站学会向 AI「自我介绍」
前端·人工智能·chrome
雪芽蓝域zzs7 分钟前
二十一节:进阶:用户列表批量删除功能
前端·javascript·vue.js
vx+_bysj68699 分钟前
springboot 旅行小程序97353
spring boot·后端·小程序·旅行小程序
研☆香15 分钟前
可选链运算符和空值合并运算符的使用
前端·javascript·vue.js
leeyi18 分钟前
SSE 到了浏览器会怎样:解析、重连与中止(第105篇)
前端
雪芽蓝域zzs21 分钟前
第二十七节:进阶:路由权限控制 + 404 / 401 全局异常页面开发
前端·javascript·html
风骏时光牛马22 分钟前
稳定性治理与疑难问题深度分析实践
前端
光影少年32 分钟前
react navite 简单原生方法双向调用示例
javascript·react native·react.js
zzzzzz31034 分钟前
react-bits:把“酷炫组件”放回 React 组件化的语境里看
javascript·react.js·动效
andrsted6 小时前
用练题簿小程序 - 让错题不再白错
学习·微信小程序·小程序·学习方法