欢迎光临,了解微信小程序开发,就上易用通!

微信小程序canvas尺寸设置

发布:2018-05-03 15:54浏览: 来源:网络 作者:cola

微信小程序尺寸设置可使用rpx来标记尺寸,类同rem可在微信小程序中自适应兼容换算不同的机型尺寸。 
但在小程序canvas中,尺寸换算会无效(由于绘画的滞后),因此需要自适应计算canvas尺寸。

 

一.解决方案

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

wx.getSystemInfo(OBJECT)

获取系统信息。

OBJECT参数说明:

微信小程序canvas尺寸设置(图1)

success回调参数说明:

微信小程序canvas尺寸设置(图2)

示例代码:

 

				
  1. wx.getSystemInfo({
  2. success: function(res) {
  3. console.log(res.model)
  4. console.log(res.pixelRatio)
  5. console.log(res.windowWidth)
  6. console.log(res.windowHeight)
  7. console.log(res.language)
  8. console.log(res.version)
  9. console.log(res.platform)
  10. }
  11. })
 

二.计算示例

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

 

				
  1. wx.getSystemInfo({
  2. //获取系统信息成功,将系统窗口的宽高赋给页面的宽高
  3. success: function (res) {
  4. that.width = res.windowWidth
  5. that.height = res.windowHeight
  6. that.radius = 105 / 602 * that.height
  7. }
  8. })





免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。