微信小程序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,
)
}
相关推荐
Heo4 分钟前
简单聊聊webpack摇树的原理
前端·javascript·面试
San305 分钟前
深入理解 JavaScript 异步编程:从 Ajax 到 Promise
javascript·ajax·promise
少卿8 分钟前
React 日历组件完全指南:从网格生成到农历转换
前端·react.js
程序员鱼皮25 分钟前
Gemini 3.0 发布!
前端·ai编程·gemini
程序员鱼皮26 分钟前
Gemini 3.0 炸裂发布!前端又死了???
前端·ai·程序员·互联网·代码
xiangxiongfly91529 分钟前
CSS svg
前端·css·svg
山依尽39 分钟前
如何将一个 React SPA 项目迁移到 Next.js 服务端渲染
前端·next.js
43 分钟前
使用 svgfmt 优化 SVG 图标
前端·svg·icon
Watermelo61744 分钟前
href 和 src 有什么区别,它们对性能有什么影响?
前端·javascript·vue.js·性能优化·html·html5·用户体验
hqk1 小时前
鸿蒙零基础语法入门:开启你的开发之旅
android·前端·harmonyos