Android A4尺寸 canvas,微信小程序canvas尺寸设置
微信小程序尺寸设置可使用rpx来标记尺寸,类同rem可在微信小程序中自适应兼容换算不同的机型尺寸。
但在小程序canvas中,尺寸换算会无效(由于绘画的滞后),因此需要自适应计算canvas尺寸。
一.解决方案
使用小程序提供的getSystemInfo可以获取当前设备的系统信息,通过获取当前的设备尺寸,来换算所需要设置的canvas尺寸,从而使得canvas绘图可以适用于所有设备。
wx.getSystemInfo(OBJECT)
获取系统信息。
OBJECT参数说明:
参数
类型
必填
说明
success
Function
是
接口调用成功的回调
fail
Function
否
接口调用失败的回调函数
complete
Function
否
接口调用结束的回调函数(调用成功、失败都会执行)
success回调参数说明:
参数
说明
最低版本
brand
手机品牌
model
手机型号
pixelRatio
设备像素比
screenWidth
屏幕宽度
screenHeight
屏幕高度
windowWidth
可使用窗口宽度
windowHeight
可使用窗口高度
language
微信设置的语言
version
微信版本号
system
操作系统版本
platform
客户端平台
fontSizeSetting
用户字体大小设置。以“我-设置-通用-字体大小”中的设置为准,单位:px
SDKVersion
客户端基础库版本
示例代码:
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
}
})
Android A4尺寸 canvas,微信小程序canvas尺寸设置相关推荐
- 微信小程序 canvas type = 2d 绘制海报心得(包括怎么绘制图片和圆角图片和圆角矩形等)
微信小程序 canvas type=2d 使用心得 为了方便这里我封装成了一个component 然后说说怎么使用最新的方法(使用方法类似于html中的canvas可以进行参考)获取--canvas ...
- 微信小程序Canvas绘图API
微信小程序Canvas绘图API 前言 使用姿势 常用API(以下API都是通过CanvasContext对象进行调用) 颜色.样式 setFillStyle(string|CanvasGradien ...
- 用python画圆角矩形_详解微信小程序canvas圆角矩形的绘制的方法
详解微信小程序canvas圆角矩形的绘制的方法 发布时间:2020-10-04 18:20:31 来源:脚本之家 阅读:103 作者:清夜 微信小程序允许对普通元素通过 border-radius 的 ...
- canvas 圆角矩形填充_详解微信小程序canvas圆角矩形的绘制的方法
微信小程序允许对普通元素通过 border-radius 的设置来进行圆角的绘制,但有时候在使用 canvas 绘图的时候,也需要圆角,例如需要将页面上某块区域导出为图片下载到本地的时候,常用的解决方 ...
- 【微信小程序canvas】实现小程序手写板用户签名(附代码)
[微信小程序canvas]实现小程序手写板用户签名(附代码) 工作中公司业务需要的微信小程序用户签字功能 先看效果图: wxml <view class="wrapper"& ...
- 微信小程序-canvas绘制文字实现自动换行
微信小程序-canvas绘制文字实现自动换行 在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvasContext.fillText参数为 我们只能设置文本的最大宽度,这就产生 ...
- 微信小程序canvas画布新接口type为2D时drawImage方法的使用以及注意事项
微信小程序canvas画布自2.9.0 起支持一套新 Canvas 2D 接口(需指定 type 属性),但文档不全,从原canvas的api转变到新的api时遇到不少问题,现将新版与旧版的画布载入图 ...
- 微信小程序详解 php,微信小程序canvas基础详解
canvas 元素用于在网页上绘制图形.HTML5 的 canvas 元素使用 JavaScript 在网页上绘制2D图像.本文主要和大家分享微信小程序canvas基础详解,希望能帮助到大家. 一.了 ...
- 微信小程序canvas简单使用
微信小程序canvas简单使用 index.wxml文件 index.js文件 效果图 index.wxml文件 <canvas type="2d" id="can ...
最新文章
- void函数返回值_(*void(*)()0)() 是什么
- dubbo接口测试_Django测试工具平台之Dubbo接口请求 + 前端
- 信息熵与自然语言处理
- linux 邮件客户端 n1,N1:下一代开源邮件客户端
- 数组洗牌算法-shuffle
- 如何生成自己的Yaas Service yaas
- java中对象 引用的概念_java中的对象 方法 引用 等一些抽象的概念是什么意思呢?...
- docker k8s helm常用命令梳理
- 理解 JavaScript 闭包{转载}
- 使用ZooKeeper实现分布式队列、分布式锁和选举详解
- c语言函数官网,c语言函数
- mysql linux内核_mysql 5.7.15 vs mysql 5.6.31性能测试以及不同linux内核性能比较
- HTML文档解析器 NekoHTML
- javaweb关于404、500等错误页面的处理
- SegNet论文理解
- JavaWeb学习笔记(2)-B站尚硅谷
- 通过调用百度生成短连接API接口,将长链接转换成短链接,并且生成短网址并返回,用户可以通过短连接访问,然后浏览器会解析跳转至长链接地址,有效的解决用户修改url后面的参数
- win2003服务器安全设置技术实例(一)
- 设计原则3: 不要和陌生人说话.
- “中国如果有五个丘成桐,数学肯定世界一流”
热门文章
- android朋友圈动态视频,安卓版微信7.0.5尝鲜,朋友圈可发30秒视频,网友最爱的功能是?...
- 前端的全屏与退出全屏
- istio sidecar流量接管_Istio 架构
- 01-02istio架构概念了解
- Spring Boot 整合——MongoDB整合3(MongoDB聚合操作)
- flask框架初学-10-restful代码风格
- 6.gstreamer RTMP推流至腾讯云平台
- idea中配置通过tomcat启动web项目
- 白蛋白纳米粒是一种较好的药物载体|白蛋白普萘洛尔人血清白蛋白HSA纳米粒|的帕西瑞肽牛血清白蛋白BSA纳米粒
- 用VBA实现Excel中某单元格不能为空