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

相关推荐
云起SAAS17 小时前
名字姓名起名打分评分抖音快手微信小程序看广告流量主开源
微信小程序·小程序·ai编程·看广告变现轻·名字姓名起名打分评分
李纲明1 天前
Wordpress如何选择适合外贸的模板主题?
微信小程序·php
一人一程温一壶酒2 天前
微信小程序uniapp开发附源码——图片加水印
微信小程序·uni-app·notepad++
vx_bscxy3222 天前
告别毕设焦虑!Python 爬虫 + Java 系统 + 数据大屏,含详细开发文档 基于微信小程序的民宿预约系统22398 (上万套实战教程,赠送源码)
java·spring boot·mysql·微信小程序·课程设计
千寻技术帮2 天前
50015_基于微信小程序的红色旅游系统
微信小程序·小程序·源码·ppt·项目文档
sg_knight2 天前
微信小程序中 WebView 组件的使用与应用场景
前端·javascript·微信·微信小程序·小程序·web·weapp
我很苦涩的3 天前
使用微信小程序实现多格验证码效果
微信小程序·小程序
阿里花盘3 天前
花店微信小程序怎么做,创建一个小程序需要多少钱
微信小程序·小程序
2501_933509073 天前
无锡制造企税惠防错指南:知了问账帮守政策红利线
大数据·人工智能·微信小程序
汤姆yu3 天前
基于微信小程序的智慧社区娱乐服务管理平台
微信小程序·娱乐