小程序canvas尺寸如何设置

小程序canvas尺寸如何设置

这篇文章主要讲解了“小程序canvas尺寸如何设置”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“小程序canvas尺寸如何设置”吧！

　　微信小程序尺寸设置可使用rpx来标记尺寸，类同rem可在微信小程序中自适应兼容换算不同的机型尺寸。

　　但在小程序canvas中，尺寸换算会无效(由于绘画的滞后)，因此需要自适应计算canvas尺寸。

　　一.解决方案

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

　　wx.getSystemInfo(OBJECT)

　　获取系统信息。

　　示例代码：

　　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

　　}

　　})

感谢各位的阅读，以上就是“小程序canvas尺寸如何设置”的内容了，经过本文的学习后，相信大家对小程序canvas尺寸如何设置这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是高防服务器网，小编将为大家推送更多相关知识点的文章，欢迎关注！

[微信提示：高防服务器能助您降低 IT 成本，提升运维效率，使您更专注于核心业务创新。

[图文来源于网络，不代表本站立场，如有侵权，请联系高防服务器网删除]
[