getPoster: function (event){ var _this=this; //绘图开始 var ctx_height = _this.data.goods_canvas_height; var ctx_width = _this.data.goods_poster_width; var ctx = wx.createCanvasContext('myCanvas') ctx.setFillStyle('#fff') ctx.fillRect(0, 0, ctx_width, ctx_height) //店铺头像填充绘制的圆 ctx.setFillStyle('#000') ctx.save() ctx.beginPath() ctx.arc(ctx_width * 0.14 / 2 + 10, ctx_width * 0.14 / 2 + 10, ctx_width * 0.14 / 2, 0, 2 * Math.PI) ctx.clip() ctx.drawImage(_this.data.astore_logo_path, 10, 10, ctx_width * 0.14, ctx_width * 0.14) ctx.restore() //店铺名称 ctx.setFontSize(14) ctx.setTextAlign('left') ctx.setTextBaseline('middle') ctx.fillText(_this.data.agent4_info.astore_name ? _this.data.agent4_info.astore_name : _this.data.agent4_info.agent4_name, ctx_width * 0.14 + 20, ctx_width * 0.14 / 2 + 10) var text_start = 10; //自营图标 if (typeof (_this.data.ziying_width) == 'undefined') { var ziying_width = 25; } else { var ziying_width = _this.data.ziying_width / _this.data.ziying_height * 12; } ctx.drawImage(_this.data.ziying_path, text_start, ctx_width * 0.14 + 20, ziying_width, 12) text_start = text_start + ziying_width + 5; //跨境图标 if (_this.data.goods_info.cross_border) { if (typeof (_this.data.kuajing_width) == 'undefined') { var kuajing_width = 25; } else { var kuajing_width = _this.data.kuajing_width / _this.data.kuajing_height * 12; } ctx.drawImage(_this.data.kuajing_path, text_start, ctx_width * 0.14 + 20, kuajing_width, 12) text_start = text_start + kuajing_width + 5; } //商品名换行 ctx.setFontSize(12) ctx.setTextBaseline('top') var temp_text_start = text_start; var chr = _this.data.goods_info.goods_name.split("");//这个方法是将一个字符串分割成字符串数组 var temp = ""; var row = []; for (var a = 0; a < chr.length; a++) { if (ctx.measureText(temp).width < ctx_width - temp_text_start - 10-10) { temp += chr[a]; } else { temp_text_start = 10; a--; //这里添加了a-- 是为了防止字符丢失，效果图中有对比 row.push(temp); temp = ""; } } row.push(temp); //如果数组长度大于2 则截取前两个 if (row.length > 2) { var rowCut = row.slice(0, 2); var rowPart = rowCut[1]; var test = ""; var empty = []; for (var a = 0; a < rowPart.length; a++) { if (ctx.measureText(test).width < ctx_width - temp_text_start - 10 - 30) { test += rowPart[a]; } else { break; } } empty.push(test); var group = empty[0] + "..."//这里只显示两行，超出的用...表示 rowCut.splice(1, 1, group); row = rowCut; } for (var b = 0; b < row.length; b++) { ctx.fillText(row[b], text_start, ctx_width * 0.14 + 20 + b * 15, 300); ctx.fillText(row[b], text_start + 1, ctx_width * 0.14 + 20 + b * 15, 300); text_start = 10; } //广告 ctx.setFillStyle('#9B9B9B') var adv_txt = _this.data.goods_info.goods_advword ? _this.data.goods_info.goods_advword : (_this.data.goods_info.gc_name + _this.data.goods_info.goods_name) var chr = adv_txt.split("");//这个方法是将一个字符串分割成字符串数组 var temp = ""; var row = []; if (ctx.measureText(adv_txt).width < ctx_width - 20) { ctx.fillText(adv_txt, 10, ctx_width * 0.14 + 20 + b * 15) } else { for (var a = 0; a < chr.length; a++) { if (ctx.measureText(temp).width < ctx_width - 20 - 30) { temp += chr[a]; } else { temp = temp + "..."; break; } } ctx.fillText(temp, 10, ctx_width * 0.14 + 20 + b * 15) } //商品图片 ctx.drawImage(_this.data.goods_image_path, 0, ctx_width * 0.14 + 20 + (b + 1) * 15+10, ctx_width, ctx_width) //画线 var left_width = parseInt(ctx_width * 0.5328) var bottom_height = parseInt(ctx_height * 0.15) ctx.setFillStyle('#E7E7E7') ctx.fillRect(left_width, ctx_width * 0.14 + 20 + (b + 1) * 15 + 10 + ctx_width + 10, 1, bottom_height) //小程序 ctx.drawImage(_this.data.minipro_code_path, left_width + 10, ctx_width * 0.14 + 20 + (b + 1) * 15 + 10 + ctx_width +5, bottom_height, bottom_height) ctx.setFontSize(10) ctx.setFillStyle('#9B9B9B') ctx.fillText('（长按查看商品）', left_width + 5, ctx_width * 0.14 + 20 + (b + 1) * 15 + 10 + ctx_width + 5 + bottom_height) //国旗 if (_this.data.goods_info.country_id){ if (typeof (_this.data.country_pic_height) == 'undefined') { var country_pic_width = 14 } else { var country_pic_width = _this.data.country_pic_width / _this.data.country_pic_height * 14 } }else{ var country_pic_width=0; } //品牌 ctx.setFontSize(12) ctx.setFillStyle('#000') ctx.setTextAlign('right') var brand_text=''; brand_text += _this.data.goods_info.country_name; if (_this.data.goods_info.country_name && _this.data.goods_info.brand_name){ brand_text += ' | '; } brand_text += _this.data.goods_info.brand_name; var chr = brand_text.split("");//这个方法是将一个字符串分割成字符串数组 var temp = ""; var row = []; if (ctx.measureText(brand_text).width < left_width - 20 - country_pic_width) { } else { for (var a = 0; a < chr.length; a++) { if (ctx.measureText(temp).width < left_width - 20 - 24 - country_pic_width) { temp += chr[a]; } else { brand_text = temp + "..."; break; } } } ctx.setTextBaseline('top') ctx.fillText(brand_text, left_width - 10, ctx_width * 0.14 + 20 + (b + 1) * 15 + 10 + ctx_width + 10) if (_this.data.goods_info.country_id){ console.log(left_width - 10 - ctx.measureText(brand_text).width - country_pic_width); console.log(ctx_width * 0.14 + 20 + (b + 1) * 15 + ctx_width); console.log(_this.data.astore_logo_path); ctx.drawImage(_this.data.country_pic_path, left_width - 10 - ctx.measureText(brand_text).width - country_pic_width - 5, ctx_width * 0.14 + 20  + (b + 1) * 15 + 10 + ctx_width + 10, country_pic_width, 14) } //销量 ctx.setFontSize(10) ctx.setFillStyle('#5A5A5A') ctx.setTextAlign('right') ctx.fillText('销量：' + _this.data.goods_info.goods_salenum + '件', left_width - 10, ctx_width * 0.14 + 20 + (b + 1) * 15 + 10 + ctx_width + 10+20) //价格 ctx.setFontSize(16) ctx.setFillStyle('#DB2819') ctx.setTextAlign('right') ctx.fillText(_this.data.goods_info.goods_agent2price, left_width - 10, ctx_width * 0.14 + 20 + (b + 1) * 15 + 10 + ctx_width + 10 + 20 + 25) ctx.fillText(_this.data.goods_info.goods_agent2price, left_width - 10-1, ctx_width * 0.14 + 20 + (b + 1) * 15 + 10 + ctx_width + 10 + 20 + 25) var text_width = ctx.measureText(String(_this.data.goods_info.goods_agent2price)).width; ctx.setFontSize(10) ctx.setTextAlign('left') ctx.fillText('￥', left_width - 10-12 - text_width, ctx_width * 0.14 + 20 + (b + 1) * 15 + 10 + ctx_width + 10 + 20 + 25+3) //市场价 ctx.setFontSize(10) ctx.setTextAlign('right') ctx.setFillStyle('#9B9B9B') ctx.fillText('市场价：' + _this.data.goods_info.goods_marketprice, left_width - 10 , ctx_width * 0.14 + 20 + (b + 1) * 15 + 10 + ctx_width + 10 + 20 + 25 + 3+15) //划线 ctx.fillRect(left_width - 10 - ctx.measureText('市场价：' + _this.data.goods_info.goods_marketprice).width, ctx_width * 0.14 + 20 + (b + 1) * 15 + 10 + ctx_width + 10 + 20 + 25 + 3 + 15 + 5, ctx.measureText('市场价：' + _this.data.goods_info.goods_marketprice).width, 1) ctx.draw() //绘图结束 _this.setData({pop: { poster: 'active' } }); } [图片]