微信小程序canvas适应手机屏幕

小程序canvas的API并没有像其他的一样支持小程序独有的 rpx 自适应尺寸单位,在绘制内容时所应用的单位仍然是 px,那么如何实现不同尺寸屏幕的自适应呢?
首先我们根据开发工具可知不同常用屏幕的尺寸:在这里插入图片描述由此可知我们开发中常用的参考屏幕尺寸(iPhone6)为:375*667;那么想要适应其他尺寸的屏幕时只需按照iPhone6的绘制大小按比例进行换算即可:首先利用wx.getSystemInfo (获取系统信息)的API获取屏幕宽度,然后除iPhone6的屏幕宽度,即可得到相对单位var rpx; //获取屏幕宽度,获取自适应单位 wx.getSystemInfo({ success: function(res) { rpx = res.windowWidth/375; }, })1234567在绘制方法中将参数乘以相对单位即可实现自适应:
const s = wx.createCanvasContext(“canvas”); s.drawImage(Url, 0, 0, 265 * rpx, 262.5 * rpx);

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值