隐藏canvas画布以及canvas无法使用网络资源进行绘画

本篇讲述如何隐藏canvas，以及如何解决canvas无法使用网络资源进行绘画的问题

在我上一篇的博客中，使用小程序实现了给微信头像加小红旗的功能，这里来说一下我在写这个功能时踩的坑。
首先是我使用了微信小程序存储的用户头像链接进行绘画时，会报错，说找不到资源。这是只需要用小程序自带的getImageInfo讲资源进行一下转换一下即可。

    wx.getImageInfo({
      src: that.data.userInfo.avatarUrl, // 这个就是用户头像的资源链接
      success: function (res) {
        that.setData({
          image: res.path // 在这里把转换后的路径赋值
        })
        // console.log(res)
        ctx.drawImage(that.data.image, 0, 0, 200, 200) // 这里花头像,参数分别是(图片的资源，x,y,需要绘画的图片的width,需要绘画的图片的height)
        ctx.drawImage('../../images/' + that.data.index + '.jpg', 120, 120, 80, 80)
        ctx.setTextAlign('left')
        ctx.stroke()
        ctx.draw()
      }
    })

其次是我生成图片之后，发现用canvas画布画好的图直接在页面上展示了，使用了hidden属性进行隐藏之后发现canvas无法进行绘画，使用display:none属性情况也一样。因此我使用了css来解决这个问题
使用定位，然后left设置为100%。

  <canvas canvas-id="shareImg" style="width:200px;height:200px;position:absolute;left:100%"></canvas>

这里还要强调一个问题是一定要勾选不校验域名的选项，上一篇博客也有说明。