小程序canvas尺寸设置

 

  微信小程序尺寸设置可使用rpx来标记尺寸,类同rem可在微信小程序中自适应兼容换算不同的机型尺寸。

  但在小程序canvas中,尺寸换算会无效(由于绘画的滞后),因此需要自适应计算canvas尺寸。

  一.解决方案

  使用小程序提供的getSystemInfo可以获取当前设备的系统信息,通过获取当前的设备尺寸,来换算所需要设置的canvas尺寸,从而使得canvas绘图可以适用于所有设备。

  wx.getSystemInfo(OBJECT)

  获取系统信息。

  OBJECT参数说明:

  success回调参数说明:

  示例代码:

  wx.getSystemInfo({

  success: function(res) {

  console.log(res.model)

  console.log(res.pixelRatio)

  console.log(res.windowWidth)

  console.log(res.windowHeight)

  console.log(res.language)

  console.log(res.version)

  console.log(res.platform)

  }

  })

  二.计算示例

  获取当前窗口宽、高以动态换算需要的canvas尺寸

  wx.getSystemInfo({

  //获取系统信息成功,将系统窗口的宽高赋给页面的宽高

  success: function (res) {

  that.width = res.windowWidth

  that.height = res.windowHeight

  that.radius = 105 / 602 * that.height

  }

  })


最新小程序推荐:

铁路12306火车票小程序

铁友12306火车票抢票小程序

智行火车票12306购票小程序

上一篇 小程序加减号弹出框开发文档 下一篇 跳一跳小程序开发环境搭建,Python搭建跳一跳小程序
论坛资讯同步说明,本文同步自论坛:bbs.miaozhizuo.com,如您在论坛注册成为会员用户并且发帖,则默认论坛文章同步协议,协议内容请移步论坛查看!

          在线客服

            点击这里给我发消息

          VIP咨询
         点击这里给我发消息

          咨询热线

   17080039991

      (免费拨打)

          代理招商

   178-9531-8531

[关闭]
随手APP微信

官方微信自助客服

[关闭]