小程序canvas生成图片保存本地

小程序canvas生成图片保存本地

注意事项：1、canvas中的图片最好使用 wx.getImageInfo提前下载下来， 2、canvas在处于视图隐藏时期无法生成图片 3、canvas图片生成需要时间，所以出现生成图片不完整可使用定时器使其生成完成在展示

浅学Canvas画布生成

---

生成图片思路

一、wxml页面

 <canvas canvas-id="myShareCanvasTemp" style="width: 100%;height: 100%;" />

提示：可设置canvas的宽高

二、js页面

代码如下（示例）：

canvasDataTemp: function (obj) {
   
    var that = this
    //配置canvas适应不同机型
    var rpx;
    wx.getSystemInfo({
   //获取机型信息
      success: function (res) {
   
        rpx = res.windowWidth / 375
      }
    })
    const ctx = wx.createCanvasContext('myShareCanvasTemp')//获取画布id
    //绘制最大背景
    ctx.beginPath()
    // ctx.rect(0, 0, 345*rpx, 515*rpx)//填充一个矩形（x轴坐标,y轴坐标,矩形宽,矩形高）,strokeRect:画一个矩形(非填充)。 用 setStrokeStyle 设置矩形线条的颜色
    ctx.setFillStyle('#ECFAFD')
    this.roundRect(ctx, 0, 0