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

相关推荐
DK七七2 小时前
多端校园圈子论坛小程序,多个学校同时代理,校园小程序分展示后台管理源码
开发语言·前端·微信小程序·小程序·php
小小码神Sundayx2 小时前
三、模板与配置(下)
笔记·微信小程序
晓风伴月5 小时前
uniapp: IOS微信小程序输入框部分被软键盘遮挡问题
微信小程序·小程序·uni-app
计算机-秋大田6 小时前
基于微信小程序的乡村研学游平台设计与实现,LW+源码+讲解
java·spring boot·微信小程序·小程序·vue
小马哥编程9 小时前
【微信小程序】报修管理
微信小程序·小程序
前端(从入门到入土)11 小时前
微信小程序自定义顶部导航栏(适配各种机型)
微信小程序·小程序
放逐者-保持本心,方可放逐17 小时前
微信小程序=》基础=》常见问题=》性能总结
前端·微信小程序·小程序·前端框架
计算机-秋大田17 小时前
基于微信小程序的养老院管理系统的设计与实现,LW+源码+讲解
java·spring boot·微信小程序·小程序·vue
尚学教辅学习资料21 小时前
基于微信小程序的电商平台+LW示例参考
java·微信小程序·小程序·毕业设计·springboot·电商平台
尘浮生21 小时前
Java项目实战II基于微信小程序的移动学习平台的设计与实现(开发文档+数据库+源码)
java·开发语言·数据库·spring boot·学习·微信小程序·小程序