本文實例為大家分享了微信小程序繪制圖片發送朋友圈的具體代碼，供大家參考，具體內容如下

這種生成圖片的效果是很常見的，實現起來也不難，跟原生js的差不多。需要注意的就是canvas標簽上不要加太多的css，后果呢就是導致canvas不顯示，還有呢就是canvas組件的優先級是最高的，所以會覆蓋掉下面的所有內容，解決方法呢就是使用：

使用上面這兩個組件是可以蓋在canvas上面的。

注意：canvas繪制不支持網絡圖片，需要將網絡圖片保存成本地圖片

 onLoad: function(options) {    var grade = options.grade;    this.setData({      grade: grade    })    this.loading();   },  //檢測，網絡圖片是否下載完成  loading: function() {    var _this = this;    wx.showLoading({      title: '生成中...',    })    timer = setInterval(function() {      var avatarUrl = _this.data.avatarUrl;      var qc_code = _this.data.qc_code;      if (avatarUrl != null && qc_code != null) {        wx.hideLoading();        clearInterval(timer);        _this.draw();      }    }, 500)  },  //保存到相冊  saveImage: function() {    var imagePath = this.data.imagePath;    wx.saveImageToPhotosAlbum({      filePath: imagePath,      success: function(res) {        console.log(res)      },      fail: function(res) {        console.log(res)      }    })   },  //將用戶頭像下載為本地路徑  downImage: function(img) {    var _this = this;    wx.getImageInfo({      src: img,      success: function(res) {        console.log(res.path)        _this.setData({          avatarUrl: res.path        })       }    })  },  //下載小程序二維碼  downImage2: function (img) {    var _this = this;    wx.getImageInfo({      src: img,      success: function (res) {        console.log(res.path)        _this.setData({          qc_code: res.path        })       }    })  },  //生成canvas圖片  draw: function() {    var _this = this;    var context = wx.createCanvasContext('firstCanvas');    var userInfo = wx.getStorageSync('userInfo');    var award ;    // 性別    var gender = userInfo.gender;    //背景圖片    var bg = '../../images/icon-cj.png';    //得分    var grade = 0 ^ _this.data.grade;    var width;    var height;    if (grade >= 0 && grade <= 30) {      if(gender == 2){        award = '../../images/zbzxlp.png';      }else{        award = '../../images/zbzxlg.png';      }    }else if(grade >= 31 && grade <= 60){      if (gender == 2) {        award = '../../images/zklp.png';      } else {        award = '../../images/zklg.png';      }    } else if (grade >= 61 && grade <= 80){      if (gender == 2) {        award = '../../images/zmlp.png';      } else {        award = '../../images/whlg.png';      }    }else{      if (gender == 2) {        award = '../../images/wmlp.png';      } else {        award = '../../images/wmlg.png';      }    }      if (award == '../../images/zbzxlp.png' || award == '../../images/zbzxlg.png'){      width = 156;      height= 25;    }else{      width = 103;      height = 25;    }      //二維碼    var qc_code = _this.data.qc_code;    // 用戶頭像    var avatarUrl = _this.data.avatarUrl;    //獲取設備的基本信息    wx.getSystemInfo({      success: function(res) {        //繪制背景圖        context.drawImage(bg, 0, 0, 350, 468);        // 繪制獎項        context.drawImage(award,180 - (width / 2),212 - (height / 2),width,height);        //繪制二維碼        context.drawImage(qc_code, 175 - (92 / 2), 385 - (108 / 2), 92, 107);        //繪制得分        context.setFontSize(28); //字體大小        context.fillStyle = '#4fc089';        context.setTextAlign('center')        context.fillText(grade, 177, 48)        // 繪制姓名        context.setFontSize(16);        context.fillStyle = '#000000';        context.setTextAlign('center')        context.fillText(userInfo.nickName, 167, 180);        // 繪制頭像        context.drawImage(avatarUrl, 72, 157, 33, 33);         context.draw(false, function() {          setTimeout(function() {            wx.canvasToTempFilePath({              width: 350,              height: 468,              destWidth: 700,              destHeight: 936,              canvasId: 'firstCanvas',              success: function(res) {                var tempFilePath = res.tempFilePath;                console.log("圖片"+tempFilePath);                _this.setData({                  imagePath: tempFilePath,                  isCanvas: true                });                _this.upload(tempFilePath);               },              fail: function(res) {                console.log(res);              }            });          }, 1000);        });      },    })  },