用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

微信小程序canvas尺寸设置

Rolan 2018-1-11 00:24

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

微信小程序尺寸设置可使用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. })
鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 楠倏之语 来自: 简书

相关阅读