小程序Canvas 2D问题解决,如安卓drawImage不执行、动态高度设置、高度1365(或4096)限制等

我的最新版小程序想在绘制时使用自定义字体,需要将旧版canvas升级到2d新版,发现了许多问题,下面记录一下并提供解决思路,仅供参考,欢迎提供新思路。

一、开发工具和安卓上drawImage不执行,绘制出来是空白:

不知道哪里出了问题,反正要么不进image.onload,要么进入就undefined。解决办法就是先在页面生命周期onLoad中使用离屏canvas创建image,再在2d接口需要绘制图片的地方直接使用页面onLoad时创建好的image。

二、动态设置canvas高度:

解决办法就是曲线救国,调用两次绘制流程,第一次仅计算出高度,第二次再绘制内容。

三、高度1365(或4096)限制:

手机端新版canvas 2d高度限制不好解决,我的办法就是计算高度,如果超过限制就提示用户使用电脑端小程序绘制,并保持小程序电脑端依然走老canvas流程,所幸的是老canvas支持电脑端自定义字体。

四、绘制后的内容清晰度不好,模糊:

页面wxml中的style宽高值需要和js代码中的canvas宽高值(未乘宽高比之前)保持一致。

相关推荐
kyriewen16 小时前
一个人+Cursor,7天上线付费小程序:第1天我就想放弃了
前端·微信小程序·cursor
暗不需求18 小时前
从路虎汽车小程序看微信小程序开发的最佳实践
前端·javascript·微信小程序
aiguangyuan1 天前
微信小程序服务商
微信小程序·前端开发
一支帆1 天前
微信小程序-情侣点餐
java·微信小程序·情侣点餐
Slow菜鸟1 天前
AI开发-微信小程序(全流程提示词)
人工智能·微信小程序
橘子海全栈攻城狮1 天前
【最新源码】鸟博士微信小程序 023
spring boot·后端·web安全·微信小程序·小程序
Yuujs1 天前
微信小程序反编译保姆级教程
微信小程序·小程序
m0_647057961 天前
微信小程序同声传译(WechatSI)通用接入教程
微信小程序·小程序·notepad++
kkk哥1 天前
weixin121作品集展示微信小程序
java·mysql·微信小程序·ssm·b/s架构·作品集展示微信小程序
QQ_5110082851 天前
uniapp微信小程序网上饰品商城售卖系统php python物流
微信小程序·uni-app·php