微信小程序Canvas 绘制文字到固定位置

存在博客里偶尔再看看

//.wxml文件
    
      装逼文案：
      
    

//.js文件
Page({
  data:{
    imagePath:"",
    neirong: "何止于装逼",
    maskHidden:true,
    },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
    this.createNewImg();
    //创建初始化图片
  },
//将canvas转换为图片保存到本地，然后将图片路径传给image图片的src
  createNewImg:function(){
    var that = this;
    var context = wx.createCanvasContext('mycanvas');
    var path = "/images/tools/iphone.jpg";
    //将模板图片绘制到canvas,在开发工具中drawImage()函数有问题，不显示图片
    //不知道是什么原因，手机环境能正常显示，官方推荐真机测试，工具端为模拟。
    context.drawImage(path, 0, 0, 686, 1485);
    //context.draw(true);
    //context.draw();
    this.setNeirong(context);
    //绘制图片
    context.draw();
    //将生成好的图片保存到本地，需要延迟一会，绘制期间耗时
    setTimeout(function(){
      wx.canvasToTempFilePath({
        canvasId: 'mycanvas',
        success: function (res) {
          var tempFilePath = res.tempFilePath;
          console.log(tempFilePath);
          that.setData({
            imagePath: tempFilePath,
            // canvasHidden:true
          });
        },
        fail: function (res) {
          console.log(res);
        }
      });
    },200);
  },
//将内容绘制到canvas的固定
  setNeirong: function (context) {
    var neirong = util.toThousands(this.data.neirong);
    context.setFontSize(80);
    context.setFillStyle("#ffffff");
    context.setTextAlign("center");//居中
    context.save();
    context.fillText(neirong, 343, 580);
    context.restore();
    context.stroke();
  },
  //点击图片进行预览，长按保存分享图片
  previewImg:function(e){
    var img = this.data.imagePath
    wx.previewImage({
      current: img, // 当前显示图片的http链接
      urls: [img] // 需要预览的图片http链接列表
    })
  },
  formSubmit: function(e) {
    var that = this;
    var neirong = e.detail.value.neirong;
    neirong = neirong == "" ? "何止于装逼":neirong;//空值填
    this.setData({
      neirong:neirong,
      maskHidden:false
    });
    wx.showToast({
      title: '生成器工作中...',
      icon: 'loading',
      duration:1000
    });
    setTimeout(function(){
      wx.hideToast()
      that.createNewImg();
      that.setData({
        maskHidden:true
      });
    },1000)
    
  }
})