ios微信小程序canvas动态给宽高的bug

最近在用小程序新版canvas写分享海报的时候，发现ios有bug。
刚开始把canvas的宽高直接写死，测试是没问题的。

<canvas 
  type="2d" 
  id="shareImg" 
  style="width: 530rpx; height: 943rpx;"
></canvas>

后来新增了个页面，也要用到分享海报，并且图片尺寸的比例不一样了，我就尝试将之前的分享海报封装成组件。内部就不展示了，宽度改成动态传入，高度也跟随改动。

<canvas 
  type="2d" 
  id="shareImg" 
  style="width: {{width}}rpx; height: {{width * canvasHeight / canvasWidth}}rpx;"
></canvas>

安卓没有问题，但是同事的iPhone就不行了，canvas的比例不对，宽度比预想的小了很多。百度没找到解决方案，最后十分无奈，只能把宽高改回去，完全写死，如下。这样的结果就是，对图片的比例要求一致，不能自适应了。

<canvas 
  type="2d" 
  id="shareImg" 
  style="width: 530rpx; height: 943rpx;"
></canvas>

PS：宽高写死后，我发现比例不符合要求的图片在ios不会被拉伸，正常应该是拉伸适应我给定的宽高的，安卓也是拉伸的。

本文地址：https://blog.csdn.net/qq_39730030/article/details/107103284