微信小程序canvas尺寸设置 - 新闻资讯 - 云南小程序开发|云南软件开发|云南网站建设-昆明葵宇信息科技有限公司

159-8711-8523

云南网建设/小程序开发/软件开发

知识

不管是网站,软件还是小程序,都要直接或间接能为您产生价值,我们在追求其视觉表现的同时,更侧重于功能的便捷,营销的便利,运营的高效,让网站成为营销工具,让软件能切实提升企业内部管理水平和效率。优秀的程序为后期升级提供便捷的支持!

您当前位置>首页 » 新闻资讯 » 小程序相关 >

微信小程序canvas尺寸设置

发表时间:2021-3-31

发布人:葵宇科技

浏览次数:55

微信小程序尺寸设置可使用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. })

相关案例查看更多