小程序模板网

微信小程序canvas尺寸设置

发布时间:2018-05-03 15:54 所属栏目:小程序开发教程

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

 

一.解决方案

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

wx.getSystemInfo(OBJECT)

获取系统信息。

OBJECT参数说明:

success回调参数说明:

示例代码:

 

				
  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. })


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/24210.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询