小程序
小游戏
企业微信
微信支付
扫描小程序码分享
- 需求的场景描述（希望解决的问题）
使用canvas不能实现手机屏幕自适应
- 希望提供的能力
怎样实现坐标自适应问题
2 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
不难的，一切依据屏幕宽度与画布比例来换算，
比如设计稿为 750，屏宽用 wx.getSystemInfo 获得为 375，
（论坛中看到有些机型获取不到屏宽，所以弄个屏宽默认值为 414）
然后是画布比例，非全屏情况下的画布，设计稿比如为 560x844。
基于以上数据，则有下面的代码：
wx.getSystemInfo({
complete: win => {
if
(!/ok$/i.test(win.errMsg))
return
alert(
'无法生成分享图'
);
var
cvW = (win.windowWidth || 414) * (560 / 750);
cvH = 844 / 560 * cvW;
// 此时的 px 即为设计稿的 1px 了
// 之后只需按设计稿的值去乘即可，比如 220 * px
px = cvW / 560;
},
})
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
这个可以获取到屏幕的高和宽，然后就可以换算了
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
不难的，一切依据屏幕宽度与画布比例来换算，
比如设计稿为 750，屏宽用 wx.getSystemInfo 获得为 375，
（论坛中看到有些机型获取不到屏宽，所以弄个屏宽默认值为 414）
然后是画布比例，非全屏情况下的画布，设计稿比如为 560x844。
基于以上数据，则有下面的代码：
wx.getSystemInfo({complete: win => {if(!/ok$/i.test(win.errMsg))returnalert('无法生成分享图');varcvW = (win.windowWidth || 414) * (560 / 750);varcvH = 844 / 560 * cvW;// 此时的 px 即为设计稿的 1px 了// 之后只需按设计稿的值去乘即可，比如 220 * pxvarpx = cvW / 560;},})wx.getSystemInfo
这个可以获取到屏幕的高和宽，然后就可以换算了