私域电商软件及相关增值服务提供商    

关于严厉谴责冒用我司名义发布虚假招聘信息严正声明 北京:4006-601-982 / 深圳:4008-400-198 / 长沙:4006-089-731
免费试用

小程序canvas尺寸设置

2018-01-11
导读:在小程序canvas中,尺寸换算会无效,需要自适应计算canvas尺寸。...

 

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

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

  一.解决方案

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

  wx.getSystemInfo(OBJECT)

  获取系统信息。

  OBJECT参数说明:
小程序canvas尺寸设置

  success回调参数说明:
小程序canvas尺寸设置

  示例代码:

  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购票小程序

重磅推荐:小程序开店目录

第一部分:小商店是什么

第二部分:如何开通一个小商店

第三部分:如何登录小商店

第四部分:开店任务常见问题

第五部分:小商店可以卖什么

第六部分:HiShop小程序特色功能

第七部分:小程序直播

第八部分:小程序收货/物流

第九部分:小程序怎么结算

第十部分:小程序客服

第十一部分:电商创业

第十二部分:小程序游戏开发

电话咨询 微信咨询 预约演示 0元开店
Baidu
map