小程序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宽高值(未乘宽高比之前)保持一致。

相关推荐
拖孩1 小时前
代码我能全交给 AI,流量主这 500 个访客它一个都替不了我
前端·后端·微信小程序
甜到心里的蛋糕5 小时前
如何用企业微信实现让微信收到通知实时通知
服务器·python·微信小程序·fastapi
2601_963870205 小时前
基于springboot的综合网上购物商场系统
微信小程序·小程序·课程设计
2601_9638699516 小时前
力序健身房管理系统
微信小程序·小程序
拖孩1 天前
给小程序加「一键发公众号贴图」,我把 wx.shareToOfficialAccount 的三个坑趟了一遍
前端·后端·微信小程序
StevenLdh2 天前
第四期 · 云端同步与冲突仲裁:离线可写、多端一致的工程解法
java·微信小程序
m0_462803882 天前
会议签到如何设置手写签名?从创建签到到导出签名 PDF 的完整流程
微信小程序
AI工具人PM产品经理3 天前
零基础微信小程序入门:一个真实项目的里程碑路线图
微信小程序·云开发·学习路线·零基础入门·ai 编程
拖孩4 天前
这个小程序是 AI 帮我写的,可它里面一个 AI 功能都没有
前端·后端·微信小程序
克里斯蒂亚诺更新4 天前
小程序自定义导航栏怎么写:从配置到实战
微信小程序