前言

閑暇時間抽個空寫了個三國殺武將手冊的小程序，中間有個需求設計的是合成武將皮膚圖、豎排的武將姓名、以及小程序碼，然后提供保存圖片到相冊，最終讓用戶可以分享到朋友圈或其他平臺。合成圖片應該按照 Canvas 的文檔來做都沒什么問題，主要是有個豎排文字的需求，這里和大家分享一下。

正文

首先放一張最終保存到相冊的圖片吧~

自我感覺良好，至少達到了我自己的預期吧~~~

下面讓我們一步一步來看看如何實現的吧。

整個圖片分為三個部分：

先來看一下 wxml 里面的代碼，主要是放了一個 canvas 標簽，控制了一下高度和寬度屬性。

<view><canvas class='share-canvas' style="width:100%;height:{{canvasHeight}}px" canvas-id="share_canvas"></canvas></view>

武將圖片

drawHeroImage: function (path) {var that = this;// 拿到canvas contextlet ctx = wx.createCanvasContext('share_canvas');// 為了保證圖片比例以及繪制的位置，先要拿到圖片的大小wx.getImageInfo({src: path,success: function (res) {// 計算圖片占比信息 let maxWidth = Math.min(res.width, that.data.canvasWidth * 0.65);let radio = maxWidth / res.width;let offsetY = (that.data.canvasHeight - res.height * radio) / 2;console.log('offsetY=' + offsetY);that.setData({imageWidth: res.width * radio,imageHeight: res.height * radio,offsetY: offsetY,});// 繪制canvas背景，不屬于繪制圖片部分ctx.setFillStyle('white')ctx.fillRect(0, 0, that.data.canvasWidth, that.data.canvasHeight);// 繪制武將圖片，path是本地路徑，不可以傳網絡url，如果是網絡圖片需要先下載ctx.drawImage(path, 10, offsetY, res.width * radio, res.height * radio)// 繪制小程序碼that.drawQrCodeImage(ctx);// 繪制勢力漢字：吳that.drawInfluence(ctx, that.data.hero.HERO.INFLUENCE);// 繪制武將姓名：陸遜that.drawName(ctx, that.data.hero.HERO.NAME);// 繪制武將稱號：江陵侯that.drawHorner(ctx, that.data.hero.HERO.HORNER);// 最終調用draw函數，生成預覽圖// 一個坑點：只能調用一次，否則后面的會覆蓋前面的ctx.draw();}});}

小程序碼

小程序碼和武將圖片是一個類型，無非就是需要計算繪制的位置，這里就不再展示相關代碼了。

武將文字信息

從剛剛的代碼可以看出，我分了3個部分來繪制，其實 吳 和 陸遜 應該是可以放到一起的，但是我在繪制的時候發現，空格在繪制的時候會引起異常，導致空格后面的文字無法繪制出來，所以我這里 吳 和 陸遜 中間的空白是靠位置偏移來做的。