最近做的一个需求,遇到一个问题,小程序绘图目前只支持 px
单位,设计图一般是以 iphone6
为基准设计,如果严格 iphone6
的尺寸进行代码编写,放在其他尺寸的设备上,肯定是不行的,所以需要按照设备进行等比例兼容,这里给出两个解决方案
先假设一个需求,下面是最终实现的效果(以 iphone6
为基准),下面就以此为目标进行展开
整个页面被
canvas
组件覆盖(在iphone6
下宽高为375x603
),中间偏蓝色的是一张图片,图片上有一行字flexible canvas
类 rem
等比例缩放单位的解决方案,也就是以一个尺寸为基准,例如 iphone 6
,然后其他设备按照这个标准,在保证宽度铺满设备的前提下,进行等比例缩放
绘制的代码很简单:
const ctx = wx.createCanvasContext('shareCard')
ctx.drawImage(