最近做的一个需求，，，，遇到一个问题，，，，小程序绘图现在只支持 px单位，，，，设计图一般是以 iphone6为基准设计，，，，若是严酷 iphone6的尺寸举行代码编写，，，，放在其他尺寸的装备上，，，，肯定是不可的，，，，以是需要凭证装备举行等比例兼容，，，，这里给出两个解决方案

类 rem

等比例缩放单位的解决方案，，，，也就是以一个尺寸为基准，，，，例如 iphone 6，，，，然后其他装备凭证这个标准，，，，在包管宽度铺满装备的条件下，，，，举行等比例缩放

绘制的代码很简朴：

const ctx = wx.createCanvasContext('shareCard')
ctx.drawImage('../58a.png', this.remSize(85), this.remSize(100), this.remSize(205), this.remSize(250))
ctx.setFontSize(this.remSize(16))
ctx.setFillStyle('yellowgreen')
ctx.fillText('flexible canvas', this.remSize(100), this.remSize(130))
ctx.draw()
复制代码

其中，，，，remSize 这个要领就是用于等比例缩放尺寸

remSize (num) {
  return num * scale
}
复制代码

其中，，，，scale就是目今装备与设计基准装备 iphone6的宽度比例

scale = wx.getSystemInfoSync().windowWidth / 375
复制代码

目今是以铺满装备宽度为目的，，，，以是高度不体贴，，，，即 以宽度为参考，，，，高度 auto

以上，，，，就基本实现需求，，，，做法很简朴，，，，这是通常一直的解决方案 由于示例的需求较量简朴，，，，以是看着没多大问题，，，，很完善，，，，可是若是现实需求，，，，较量重大的那种，，，，就有点不太优美了 那里不优美呢？？？就是换算尺寸的时间，，，，每个尺寸都要挪用一遍 remSize要领，，，，稍微重大点需求可能就有几十个需要换算的尺寸了，，，，那就要写几十遍的 remSize，，，，虽然，，，，写是可以写的，，，，只是总感受那里不太对劲

图片取代

这个要领不需要频仍的尺寸换算，，，，最后统一整体换算即可，，，，原理也很简朴

• 凭证 iphone6尺寸举行绘制

首先，，，，无论目今装备的尺寸是什么，，，，都不必管，，，，先以为目今装备就是 iphone6，，，，然后建设 canvas，，，，在上面举行绘图，，，，只不过，，，，不可让用户看到这个 canvas，，，，由于目今装备并纷歧定是 iphone6，，，，而你直接就认定是 iphone6，，，，并以 iphone6的尺寸举行绘制，，，，绘制出来的效果肯定跟设计的效果纷歧样，，，，以是不可让用户看到，，，，可以使用 ccover-view组件笼罩掉 canvas组件

Note: 若是想要通过给 canvas设置例如 opacity: 0, visibility: hidden等样式举行隐藏，，，，凭证实测，，，，在大部分的手机上着实无法生效，，，，也就是依旧能看到，，，，display: none;则是彻底将 canvas从文档流中(若是也算是文档流的话)删掉，，，，无法举行绘制，，，，以是较量好的做法就是用一个 cover-view举行笼罩

• 将绘制好的 canvas输出为 图片

canvas绘制好后，，，，将其绘制成图片生涯在外地暂时存储中，，，，可以拿到这个图片在外地的暂时路径，，，，然后将这张图片放到页面上，，，，并给这张图片设置尺寸样式，，，，图片的宽度即是装备的宽度，，，，高度追随宽度举行等比例缩放，，，，最终让用户看到的就是这张图片，，，，由于举行了等比例缩放，，，，以是视觉效果就是和设计图上是一样的

这里也有几个点需要注重下

• ctx.draw是异步操作

一直以为这个要领是同步要领，，，，以是挪用完此要领后连忙输出图片，，，，就泛起了有时间图片过失的情形，，，，厥后才发明这个是异步操作，，，，这就是看文档不仔细的效果

ctx.draw(false, () => {
  // 生涯为外地暂时文件
  this.saveImageToLocal()
})
复制代码

• 绘制 canvas阶段，，，，要允许页面横向溢出

由于一最先绘制 canvas是凭证iphone6的标准举行的，，，，以是在有些宽度小于 iphone6的装备上，，，，canvas的宽度是可能会比装备的宽度要大的(若是你绘制的是整屏 canvas)，，，，可是小程序页面的根元素 page，，，，默认设置了 overflow-x: hiddne;，，，，导致绘制不完整，，，，以是需要笼罩这个样式：

page {
  overflow-x: scroll;
}
复制代码

• 绘制完毕后，，，，阻止页面横向溢出

当上一步绘制完成 canvas后，，，，并乐成将图片绘制到页面上时，，，，若是目今装备的宽度小于 iphone 6，，，，又由于前面给 page元素设置了 overflow-x: scroll，，，，以是此时 canvas元素肯定会撑大页面，，，，让页面上泛起一个横向的转动条，，，，而用户看到的图片宽度是和装备宽度相同，，，，不应该泛起这种情形

解决要领，，，，一种是直接使用 wx-if这种条件语句删掉 canvas元素，，，，可是在低版本的基础库上，，，，可能会报 e.canvasId is undefined的过失(虽然凭证实测来看，，，，似乎并不影响正常功效) 第二种就是镌汰 canvas的尺寸，，，，横竖已经绘制好图片了，，，，后面也用不到它了，，，，并且用户也看不到，，，，那就可以随意减小尺寸，，，，我的做法是爽性无论宽高通通设为 0，，，，省得又泛起什么 bug

// 阻止在尺寸小的装备上溢出
this.setData({
  canvasWidth: 0,
  canvasHeight: 0
})
复制代码

以上，，，，两种要领都可以选择，，，，各有利弊，，，，第一种要写许多 rem转换，，，，第二种需要做的操作又较量多，，，，各有利弊，，，，凭证真实需求举行决议即可。。