微信小程序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,
)
}
相关推荐
小玮看世界17 分钟前
[Python] str() 和 join() 的区别与实战避坑指南
前端·javascript·python
hyf32663322 分钟前
低成本站群泛程序部署:单服务器托管百站稳定运行教程
运维·服务器·前端·搜索引擎·蜘蛛池
程序员黑豆38 分钟前
Java正则表达式详解
java·前端·ai编程
不可求~9 小时前
多模型路由怎么落地:把任务分流写进项目的最小实现
java·前端·数据库
码云之上12 小时前
小程序 iOS 多输入框焦点乱序脱坑记
ios·微信小程序·taro
AC赳赳老秦12 小时前
公开图片 OCR 数据提取:OpenClaw 合规采集公开信息图,识别文字与表格并转化为结构化数据
java·大数据·前端·数据库·python·php·openclaw
谢慧琼12 小时前
2026零基础做企业网站,低成本搭建官方网站
服务器·前端·javascript
weixin_4316004414 小时前
前端数据埋点(1):一次点击如何变成一条埋点
前端·js·数据埋点
IT_陈寒14 小时前
Python线程池吞了异常还不告诉我,这谁顶得住啊
前端·人工智能·后端