近期在工作上有项目使用到canvas来生成图片，并提供下载的功能。

基于canvas不支持自适应，都是用的px作为单位。当然网络上也有一些教程是使用比如计算像素比来金星等比例调整的。我也参考了网络上的几种方式进行了一些调整操作。发现都是有些不太稳妥，最后还是采取了生成图片后隐藏画布，用img来展示图片并提供下载（保存）的功能。也的确是可以实现的，但是，在这个过程中会有一个canvas隐藏然后展示img的切换过程，画面一闪而过的。。。在用户使用体验上并不是太好，但是又不能在一开始就把canvas给隐藏掉。否则draw()的回调进不去。于是在思考再三，尝试如下操作：

    
        <view style="top:-999999999999rpx;">
              <canvas canvas-id="canvasId" id="canvasId"></canvas>
        </view>
    

这个操作把画布移除了当前的展示区与。然后在画图过程中使用loading加载框，在会话完成后隐藏loading加载框，展示图片。体验上就好了许多，又不会导致画图出现问题。

顺便记录一下，canvas画布 宽高使用100%，不给宽高，都有可能导致draw回调不执行，小程序下添加type="2d" 标签也可能导致画布不显示。