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

//.wxml文件 <view class="input-row"> <label>装逼文案：</label> <input name='neirong' type="text" maxlength="20" placeholder="何止于装逼" /> </view> //.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)  }})