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

相关推荐
Greg_Zhong4 小时前
微信小程序中进度条总结
微信小程序·自定义进度条·slider进度条
这是个栗子1 天前
【微信小程序问题解决】删掉 “navigationStyle“: “custom“ 后仍触发了自定义导航栏
微信小程序·小程序·navigationstyle
liangdabiao1 天前
定制的乐高马赛克像素画生成器-微信小程序版本-AI 风格优化-一键完成所有工作
人工智能·微信小程序·小程序
编程小白gogogo1 天前
苍穹外卖微信小程序导入hbuilder后点击运行选择在微信开发者工具中打开,微信开发者工具打开却没有运行微信小程序解决办法
微信小程序·小程序
天籁晴空1 天前
微信小程序 静默登录 + 授权登录 双模式配合的设计方案
前端·微信小程序·uni-app
小徐_23332 天前
uni-app 组件库 Wot UI 2.0 发布了,我们带来了这些改变!
前端·微信小程序·uni-app
Greg_Zhong2 天前
微信小程序中实现自定义颜色选择器(简陋版对比精致版)
微信小程序·自定义颜色选择器面板
杰建云1672 天前
2026年第三方平台制作微信小程序多少钱?
微信小程序·小程序·小程序制作
vipbic3 天前
独立开发复盘:我用 Uni-app + Strapi v5 肝了一个“会上瘾”的打卡小程序
前端·微信小程序
全栈小53 天前
【小程序】微信小程序在体验版发起支付的时候提示“由于小程序违规,支付功能暂时无法使用”,是不是一脸懵逼
微信小程序·小程序