欢迎来到258分享网,纯净的网络源码分享基地!

258资源分享网

全部作品
全部作品
网站源码
微信源码
素材特效
源码插件
视频教程
建站学院
热门搜索: 织梦  农业种植  农业  安全设置  官方
258资源分享 > 建站学院 > 微信开发 > 微信小程序canvas尺寸设置

推荐下载

HTML5响应式自适应网咯设计

2020-05-12   浏览:738

高端HTML5响应式企业通用网

2020-05-06   浏览:519

html5响应式外贸网站英文版

2020-05-08   浏览:505

HTML5自适应律师工作室类网

2020-04-04   浏览:502

HTML5影视传媒文化公司类网

2020-05-12   浏览:496

微信小程序canvas尺寸设置

发布时间:2020-11-03  

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