第一次接觸canvas酪夷，我是抗拒的贰镣，但是多接觸幾次呜象，還有參考一下別人的思路順便結(jié)合文檔，上手應(yīng)該算是成功了（代碼亂而且不封裝的碑隆，貼我效果圖）
代碼：
<canvas class="canvasView" canvas-id="saveImg" style="width:{{bgWidth}}px;height:{{bgHeight}}px;margin:0 auto;"></canvas>
<view>這里是畫海報(bào)分享圖的</view>
<button bindtap="handelClick">點(diǎn)擊分享</button>
備注：canvas的層級好像是最高的恭陡， 當(dāng)你不需要canvas出現(xiàn)在頁面上，可以把它定位出頁面之外上煤。
Page({
? data: {
? ? windowWidth: 0, //屏幕寬度
? ? windowHeight: 0,//屏幕高度
? ? contentHeight: 0,//內(nèi)容高度
? ? contentTitle: "母怡 網(wǎng)紅茶紅糖姜茶姨媽速溶茶月經(jīng)調(diào)理氣血10g*15袋/盒", //商品標(biāo)題
? ? price: "18.9",//商品價(jià)格
? ? delPrice: "33",//劃線價(jià)
? ? canvasUrl: "", //canvas完成后的臨時(shí)路徑
? ? qrCode: "https://www.123.com/files/upload/image/201908/4027dffe-e9bf-4093-b2fd-05030861742a.jpg",? //小程序碼https圖片路徑
? ? goodsInfoImg: "https://www.123.com/files/upload/image/201908/f4cbd26c-557a-4d5c-94ff-e8a3248b2a05_source.jpg",? //商品圖片
? ? name: '小明', //微信昵稱
? ? title: '鉅惠返利 折扣不斷'? //
? },
? onLoad(){
? ? let that = this
? ? let { qrCode, goodsInfoImg, contentTitle} = that.data
? ? wx.getSystemInfo({
? ? ? success: function (res) {
? ? ? ? console.log(res)
? ? ? ? that.setData({
? ? ? ? ? windowWidth: res.windowWidth,?
? ? ? ? ? windowHeight: res.windowHeight,
? ? ? ? ? bgWidth: (res.windowWidth / 750) * 528,? /// 背景圖寬? ? 這樣做我是為了適應(yīng)手機(jī)休玩，至少我測試過目前是成功的，根據(jù)手機(jī)尺寸來變
? ? ? ? ? bgHeight: (res.windowWidth / 750) * 800,? /// 背景圖高? ? 750的設(shè)計(jì)圖，后面的800是你在ps測量的像素
? ? ? ? ? headWH: (res.windowWidth / 750) * 54,? ? ///頭像大小
? ? ? ? ? headMT: (res.windowWidth / 750) * 34,? ///頭像距離頂部位置
? ? ? ? ? headML: (res.windowWidth / 750) * 48,? ///頭像左邊距離
? ? ? ? ? nameMT: (res.windowWidth / 750) * 73, ///昵稱頂部位置
? ? ? ? ? nameML: (res.windowWidth / 750) * 110,? ///昵稱左邊距離
? ? ? ? ? goodSize: (res.windowWidth / 750) * 185, /// 商品圖大小
? ? ? ? ? goodL: (res.windowWidth / 750) * 176 , ///圖片的左邊距
? ? ? ? ? goodT: (res.windowWidth / 750) * 162, ///圖片的頂部距離
? ? ? ? ? titleL: (res.windowWidth / 750) * 150 ,? ///文字的左邊距離
? ? ? ? ? titleM: (res.windowWidth / 750) * 380 ,? ///文字的頂部距離
? ? ? ? ? priceM: (res.windowWidth / 750) * 455 , ///價(jià)錢頂部距離
? ? ? ? ? priceL: (res.windowWidth / 750) * 225 , ///價(jià)錢的左邊距
? ? ? ? ? codeSize: (res.windowWidth / 750) * 70 , ///碼的大小
? ? ? ? ? codeM: (res.windowWidth / 750) * 685 , ///距離頂部位置
? ? ? ? ? codeL: (res.windowWidth / 750) * 400 , ///距離左邊位置
? ? ? ? ? textM: (res.windowWidth / 750) * 580, ///標(biāo)題頂部距離
? ? ? ? ? textL: (res.windowWidth / 750) * 137, ///標(biāo)題左邊距
? ? ? ? })
? ? ? }
? ? })
//在canvas里用到的圖片路徑最好不要是網(wǎng)絡(luò)路徑（很坑的）拴疤，可以用wx.getImageInfo或者wx.downloadFile來下載本地永部，但需要配置downloadFile域名，但是為了測試你可以勾選那個(gè)不校驗(yàn)就好了呐矾，但是線上必須得配
? ? wx.getImageInfo({
? ? ? src: qrCode,
? ? ? success: (res) =>{
? ? ? ? console.log(res.path)? // 臨時(shí)路勁來的
? ? ? ? that.setData({
? ? ? ? ? codeSrc: res.path
? ? ? ? })
? ? ? }
? ? })
? ? wx.getImageInfo({
? ? ? src: goodsInfoImg,
? ? ? success: (res) => {
? ? ? ? console.log(res.path)
? ? ? ? that.setData({
? ? ? ? ? goodsImgSrc: res.path
? ? ? ? })
? ? ? }
? ? })
? ? let firstline;? //第一行文字
? ? let secondline;? //第二行文字
? ? //一行顯示10個(gè)字苔埋，超過一行時(shí)
? ? if (contentTitle.length > 10) {
? ? ? //第一行截取前14個(gè)字符
? ? ? firstline = contentTitle.substring(0, 10);
? ? ? //兩行都顯示不下
? ? ? if (contentTitle.length > 20) {
? ? ? ? secondline = contentTitle.substr(10, 10) + "...";
? ? ? } else {
? ? ? ? //第二行取剩下的
? ? ? ? secondline = contentTitle.substr(10, contentTitle.length - 10);
? ? ? }
? ? } else {
? ? ? //一行就能顯示時(shí)候
? ? ? firstline = contentTitle;
? ? }
? ? console.log(firstline)
? ? console.log(secondline)
? ? that.setData({
? ? ? firstline,
? ? ? secondline
? ? })
? },
//點(diǎn)擊分享，生成海報(bào)
? handelClick(){
? ? let that = this
? ? let { windowWidth, bgWidth, bgHeight, headWH, headML, headMT, name, nameMT, nameML, goodsImgSrc, goodSize, goodL, goodT, firstline, secondline, titleL, titleM, price, priceM, priceL, delPrice, codeSrc, codeSize, codeM, codeL, title, textM, textL } = this.data
? ? let ctx = wx.createCanvasContext("saveImg")
? ? //背景圖（我的是一張本地背景圖蜒犯，實(shí)在是懶得畫那些亂七八糟的東西）
? ? ctx.drawImage("../../img/poster.png", 0, 0, bgWidth, bgHeight)
? ? //頭像（后臺返回的是正方形组橄，沒辦法自己來畫圓）
? ? {
? ? ? let avatarurl_width = headWH; //繪制的頭像寬度
? ? ? let avatarurl_heigth = headWH; //繪制的頭像高度
? ? ? let avatarurl_x = headML; //繪制的頭像在畫布上的位置
? ? ? let avatarurl_y = headMT; //繪制的頭像在畫布上的位置
? ? ? ctx.save();
? ? ? ctx.beginPath(); //開始繪制
? ? ? //先畫個(gè)圓? 前兩個(gè)參數(shù)確定了圓心 （x,y） 坐標(biāo)? 第三個(gè)參數(shù)是圓的半徑? 四參數(shù)是繪圖方向? 默認(rèn)是false，即順時(shí)針
? ? ? ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false);
? ? ? ctx.clip(); //畫好了圓 剪切? 原始畫布中剪切任意形狀和尺寸愧薛。一旦剪切了某個(gè)區(qū)域晨炕，則所有之后的繪圖都會被限制在被剪切的區(qū)域內(nèi) 這也是我們要save上下文的原因
? ? ? ctx.drawImage("../../img/default Pic.png", avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth); // 推進(jìn)去圖片，必須是https圖片
? ? ? ctx.restore(); //恢復(fù)之前保存的繪圖上下文 恢復(fù)之前保存的繪圖上下午即狀態(tài) 還可以繼續(xù)繪制
? ? }
? ? //微信昵稱
? ? ctx.setFontSize(windowWidth / 750 * 28);
? ? ctx.setFillStyle('#000');
? ? ctx.fillText(name, nameML,nameMT);
? ? //商品圖
? ? ctx.drawImage(goodsImgSrc, goodL, goodT, goodSize, goodSize)
? ? //第一行文本
? ? ctx.setFontSize(windowWidth / 750 * 24);
? ? ctx.setFillStyle('#333');
? ? ctx.fillText(firstline, titleL, titleM);
? ? //第二行文本
? ? if (secondline){
? ? ? ctx.setFontSize(windowWidth / 750 * 24);
? ? ? ctx.setFillStyle('#333');
? ? ? ctx.fillText(secondline, titleL - 5, titleM + 18);
? ? }
? ? //銷售價(jià)格
? ? ctx.setFontSize(windowWidth / 750 * 32);
? ? ctx.setFillStyle('#ff4175');
? ? ctx.fillText('￥' + price, priceL, priceM);
? ? //劃線價(jià)
? ? let delPriceWidth = ctx.measureText( '￥'+ delPrice).width;? ?//計(jì)算劃線價(jià)的寬度---用于填充橫線
? ? // console.log(delPriceWidth)
? ? ctx.setFontSize(windowWidth / 750 * 28);
? ? ctx.setFillStyle('#999');
? ? ctx.fillText('￥' + delPrice, priceL + 4 , priceM + 15);
? ? //填充劃線價(jià)的橫線
? ? ctx.moveTo(priceL + 3, priceM + 11);? ? ? //設(shè)置起點(diǎn)狀態(tài)
? ? ctx.lineTo(priceL + delPriceWidth + 5, priceM + 11);? ? ? //設(shè)置末端狀態(tài)
? ? ctx.lineWidth = 1;? ? ? ? ? //設(shè)置線寬狀態(tài)
? ? ctx.strokeStyle = "#999";? //設(shè)置線的顏色狀態(tài)
? ? ctx.stroke();? ? ? ? ? ? ? //進(jìn)行繪制
? ? //標(biāo)語
? ? ctx.setFontSize(windowWidth / 750 * 30);
? ? ctx.setFillStyle('#333');
? ? ctx.fillText(title, textL, textM );
? ? //小程序碼
? ? // ctx.drawImage(codeSrc, 0, 0, 50, 50)
? ? ctx.drawImage(codeSrc, codeL, codeM, codeSize, codeSize)
? ? //最后畫圖
? ? ctx.draw(true ,function () {
? ? ? //把畫好的圖轉(zhuǎn)為微信臨時(shí)路徑地址
? ? ? wx.canvasToTempFilePath({
? ? ? ? x: 0,
? ? ? ? y: 0,
? ? ? ? width: bgWidth,
? ? ? ? height: bgHeight,
? ? ? ? destWidth: bgWidth,
? ? ? ? destHeight: bgHeight,
? ? ? ? canvasId: 'saveImg',
? ? ? ? success(res) {
? ? ? ? ? console.log(res.tempFilePath)
? ? ? ? },
? ? ? })
? ? })
? }
})毫炉；
我的入門級別就到這了瓮栗，被坑了別找我，我還是那個(gè)很菜很坑的入門仔Ｃ楣础擎鸠！
來源：http://www.reibang.com/p/f9ca41f7cc61? ?（感謝作者 -- 他還有保存到相冊那個(gè)功能喔废亭，快去看看吧：⒈Ｂ荞谩！）
