微信小程序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,
)
}
相关推荐
星恒随风1 小时前
四天学完前端基础三件套(JavaScript篇)
开发语言·前端·javascript·笔记
guslegend1 小时前
第9节:前端工程与一键启动
前端·大模型·状态模式·ai编程
杜子不疼.1 小时前
【 C++ AI 大模型接入 SDK】 - 日志模块
开发语言·javascript·c++
南囝coding1 小时前
Anthropic 内部数百个 Claude Code Skills,他们总结的这套方法值得看
前端·后端
Dxy12393102162 小时前
如何使用jQuery获取一类元素并遍历它们
前端·javascript·jquery
csdn小瓯2 小时前
AI质量评估体系:LLM-as-a-Judge实现与自动化测试实战
前端·网络·人工智能
jiayong232 小时前
第 43 课:任务详情抽屉里的批量处理闭环与删除联动
java·开发语言·前端
likerhood2 小时前
Java 访问修饰符:public、protected、private讲解
java·开发语言·javascript
刀法如飞2 小时前
JavaScript 数组去重的 20 种实现方式,学会用不同思路解决问题
前端·javascript·算法
小江的记录本3 小时前
【AI大模型选型指南】《2026年5月(最新版)国内外主流AI大模型选型指南》(个人版)
前端·人工智能·后端·ai·aigc·ai编程·ai写作