微信小程序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,
)
}
相关推荐
东风破_8 小时前
React 受控组件与非受控组件:从一个输入框讲清表单数据流
前端
尤乐娃子8 小时前
进入大厂(厂子大)实习Day12
前端·笔记·实习
程序员爱钓鱼8 小时前
Rust Copy详解:隐式复制与轻量数据类型
前端·后端·rust
weikecms9 小时前
星巴克API接口,星巴克点餐接口开发
大数据·小程序
四六的六10 小时前
端侧模型多端部署实战:从格式转换到灰度发布,Web 和移动端统一部署流水线
前端·人工智能·大模型·ai编程·ai模型·ai产品·端侧ai
vx-程序开发12 小时前
springboot农产品运输服务平台---附源码75498
java·javascript·spring boot·python·eclipse·django·php
独隅12 小时前
前端离线暂停更新策略:Service Worker 与 PWA 的静默控制实践
前端
妙码生花12 小时前
从 PHP 到 AI + Golang,程序员自救转型手记(五十八):后台系统配置管理实现
前端·后端·go
用户9385156350712 小时前
React 受控/非受控组件与 React.memo 性能优化——从本质到实战
前端·javascript·react.js