上代碼
? ? ? ? ??? ? ? ? ? ? ? ? ? ? ? ? 第一步 頁(yè)面引入? canvas? ? 添加 ID
? ? ?css
核心部分 js? ?
canvasView:?function?(object)?{
???//?console.log(object)
????let?_seif?=?this;
????wx.getSystemInfo({
??????success:?function?(res)?{
????????var?v?=?750?/?res.windowWidth;//設(shè)計(jì)稿尺寸除以??當(dāng)前手機(jī)屏幕寬度
????????function?shiftSize(w)?{
??????????return?w?/?v;
????????};
????????//?畫(huà)圖適配
????????const?ctx?=?wx.createCanvasContext('Canvas',?_seif);
????????//內(nèi)容部分
?????????ctx.save();
?????????ctx.drawImage('../../images/bj.png',?0,?0,?500,3000);?//繪制圖片
????????/****
?????????*?
?????????*?
?????????*?頭像
?????????*?
????????*/
????????ctx.save();
????????ctx.beginPath()?//開(kāi)始創(chuàng)建一個(gè)路徑
????????ctx.arc(shiftSize(250),?50,?30,?0,?2?*?Math.PI);?//畫(huà)一個(gè)圓形裁剪區(qū)域
????????ctx.setStrokeStyle('#ef5756');
????????ctx.stroke('#ef5756');
????????ctx.clip();//裁剪?
????????ctx.drawImage(object.avatarUrl,?shiftSize(190),?20,?60,?60);?//繪制圖片
????????ctx.restore();?//恢復(fù)之前保存的繪圖上下文
????????//姓名
????????ctx.save();
????????ctx.setFillStyle("#ffffff");
????????ctx.setFontSize(12);
????????ctx.setTextAlign('center');
????????ctx.fillText(object.nickName,?shiftSize(250),?100);
????????ctx.save();
????????ctx.setFillStyle("#ffffff");
????????ctx.setFontSize(10)
????????ctx.fillText('分享想買(mǎi)清單',?shiftSize(250),?116);
????????//內(nèi)容部分
????????ctx.save();
????????ctx.setFillStyle('#fff');
????????ctx.fillRect(shiftSize(10),?130,?shiftSize(480),?object.goodsVos.length?*?28.5?+?object.goodsVos.length);
????????//主播
????????ctx.save();
????????ctx.setFillStyle("#333");
????????ctx.setFontSize(10)
????????ctx.setTextAlign('left');
????????ctx.fillText(object.title,?10,?146);
????????ctx.save();
????????ctx.setFillStyle("#a4a4a4");
????????ctx.setFontSize(10);
????????console.log(object)
????????ctx.fillText(object.types=='00'???'主播口述'?:object.types=='01'???'官方正式'?:?'',?10,?164);
????????ctx.setFillStyle("#a4a4a4");
????????ctx.setFontSize(10);
????????ctx.fillText('更新時(shí)間'?+?object.syncTime?+?''?+?object.times,?shiftSize(250),?164);
????????//商品列表
????????let?index?=?28;
????????ctx.save();
????????for?(let?i?=?0;?i?<?object.goodsVos.length;?i++)?{
??????????ctx.save();
??????????ctx.setFillStyle("#333");
??????????ctx.setFontSize(10)
??????????ctx.fillText(i+1+'莲镣、',?shiftSize(16)?,?186?+?(i?*?index));
??????????ctx.save();
??????????ctx.setFillStyle("#333");
??????????ctx.setFontSize(10);
??????????if(object.goodsVos[i].name.length>17){
????????????ctx.fillText(object.goodsVos[i].name.substring(0,17)+'...',?shiftSize(50),?186?+?(i?*?index));
??????????}else{
????????????ctx.fillText(object.goodsVos[i].name.substring(0,17),?shiftSize(50),?186?+?(i?*?index));
??????????}
??????????ctx.stroke();
??????????//線(xiàn)??
??????????ctx.save();
??????????ctx.moveTo(shiftSize(10),?194?+?(i?*?index));
??????????ctx.lineTo(shiftSize(488),?194?+?(i?*?index));
??????????ctx.setLineWidth(1);
??????????ctx.setStrokeStyle('#f4f4f4');
??????????ctx.stroke();
??????????//想買(mǎi)?按鈕
??????????if?(object.goodsVos[i].isFollow?==?"E")?{
????????????ctx.save();
????????????ctx.drawImage('../../images/icon/love.png',?shiftSize(410),?176?+?(i?*?index),?14,?14);?//繪制圖片
????????????ctx.setFillStyle("#fa475e");
????????????ctx.setFontSize(10);
????????????ctx.fillText('想買(mǎi)',?shiftSize(444),?186?+?(i?*?index));
??????????}
????????}
????????//?二維碼
????????ctx.save();
????????//?ctx.beginPath()?//開(kāi)始創(chuàng)建一個(gè)路徑
????????//?ctx.arc(shiftSize(264),?(_seif.data.view.goodsVos.length?*?31.52)?+?_seif.data.view.goodsVos.length,?50,?0,?2?*?Math.PI)?//畫(huà)一個(gè)圓形裁剪區(qū)域
????????//?ctx.setStrokeStyle('#000')
????????//?ctx.stroke();
????????//?ctx.clip();//裁剪
????????ctx.drawImage('../../images/code.png',?shiftSize(160),?(object.goodsVos.length?*?30)?+140,?100,?100);?//繪制圖片
????????ctx.restore();?//恢復(fù)之前保存的繪圖上下文'
????????ctx.save();
????????ctx.setFillStyle("#ffffff")
????????ctx.fillText('長(zhǎng)按圖片識(shí)別小程序碼',?shiftSize(160),?(object.goodsVos.length?*?30)?+?260)
????????ctx.draw(true,?function?()?{
??????????setTimeout(()?=>?{
????????????wx.canvasToTempFilePath({?//寫(xiě)在?draw的回調(diào)里面才能生成圖片
??????????????canvasId:?'Canvas',
??????????????success:?function?(res)?{
????????????????_seif.setData({
??????????????????imgs:?res.tempFilePath
????????????????});
???????????????}
????????????})
??????????},?1000)?
????????})
????????//?畫(huà)圖適配完
??????}
????});
??},
注意? object的數(shù)據(jù) 格式? ?可根據(jù)需求更改
最后一步? 保存到相冊(cè)
先把微信頭像 轉(zhuǎn)化為臨時(shí)路徑??
點(diǎn)擊保存到相冊(cè)
