公告列表
公告列表
收藏
回答

小程序canvas单位换算

框架类型 问题类型 API/组件名称 终端类型 操作系统 微信版本 基础库版本
小程序 需求 绘图 客户端 iOS 6.7.0 1.9.98

- 需求的场景描述（希望解决的问题）

使用canvas不能实现手机屏幕自适应

- 希望提供的能力

怎样实现坐标自适应问题

回答关注问题邀请回答
收藏

2 个回答

  • 永恒君
    永恒君
    2018-07-19

    不难的，一切依据屏幕宽度与画布比例来换算，


    比如设计稿为 750，屏宽用 wx.getSystemInfo 获得为 375，

    （论坛中看到有些机型获取不到屏宽，所以弄个屏宽默认值为 414）


    然后是画布比例，非全屏情况下的画布，设计稿比如为 560x844。


    基于以上数据，则有下面的代码：

    wx.getSystemInfo({
      complete: win => {
        if (!/ok$/i.test(win.errMsg)) return alert('无法生成分享图');
        var cvW = (win.windowWidth || 414) * (560 / 750);
        var cvH = 844 / 560 * cvW;
        // 此时的 px 即为设计稿的 1px 了
        // 之后只需按设计稿的值去乘即可，比如 220 * px
        var px = cvW / 560;
      },
    })


    2018-07-19
    有用
    回复
  • 海纳百川
    海纳百川
    2018-07-06

    wx.getSystemInfo

    这个可以获取到屏幕的高和宽，然后就可以换算了

    2018-07-06
    有用
    回复
请 登录 后发表内容
相关问题
相关文档